CSS add line break between two elements

Question

I have this html output:

  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>';

and i need to add brake before icon with class 'ribbon'. I tried with this in CSS but it won't work:

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

I tried this already and nothing – Klapsius Feb 22 '17 at 15:45 — Klapsius, Feb 22 '17 at 15:45

score 2 · Accepted Answer · answered Feb 22 '17 at 15:46

2

I guess you can insert a block content before the icon to break it down:

.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>

answered Feb 22 '17 at 15:46

AVAVT

7,058
2
21
44

It works in this way if is single class in my case i have double class – Klapsius Feb 22 '17 at 15:51
I'm not quite sure what you mean, but if your have multiple class just append them: `.class-1.class-2.etc.ribbon:before { ... }` – AVAVT Feb 22 '17 at 15:58
M class looks like this: `class="test1 ribbon"` (two words as a name) – Klapsius Feb 22 '17 at 16:26
I'm pretty confused now. Are you sure you have copy/pasted my solution in and it didn't work? – AVAVT Feb 22 '17 at 16:28
Your solution is work with one class name but won't work with multiple classes (few names in same class) – Klapsius Feb 22 '17 at 16:36

CSS add line break between two elements

1 Answers1