CSS Add Zeilenumbruch zwischen zwei Elementen

Question

Ich habe diese html Ausgabe:

return '<div class="band"><i class="'.USER.'" aria-hidden="true"></i> '.(isset($_SESSION['logedAs'])? $_SESSION['logedAs'] : null).' <i class="'.$icon.' ribbon" aria-hidden="true"></i> '.$ribbon.'</div>'; 

und ich brauche Bremse hinzuzufügen, bevor icon mit Klasse ‚Band‘. Ich habe versucht, mit diesem in CSS aber es wird nicht funktionieren:

.ribbon span::before { 
     content: "\A"; 
     white-space: pre;; 
} 

Answer 1

Ich denke, man einen Block Inhalt vor dem Symbol einfügen kann es brechen:

.ribbon:before { 
 
    content: ""; 
 
    display: block; 
 
}

<div class="band"> 
 
    <i class="" aria-hidden="true">icon1</i> Some text 
 
    <i class=" ribbon" aria-hidden="true">icon2</i> $ribbon 
 
</div>