Как вставить разрыв строки перед элементом с помощью CSS

Question

Мне кажется, что я нашел способ, используя свойство содержимого CSS, вставить тег разрыва строки перед элементом. Очевидно, это не работает:

#restart:before { content: '<br/>'; }

Но как ты это делаешь?

Answer 1

при условии, что вы хотите, чтобы высота линии составляла 20 пикселей

  .restart:before { 
     content: 'First Line';
     padding-bottom:20px;
  }
  .restart:after { 
    content: 'Second-line';
    position:absolute;
    top:40px;
  }

Answer 2

body * { line-height: 127%; }
p:after { content: "\A "; display: block; white-space: pre; }

https://www.w3.org/TR/CSS2/generate.html#x18 Content Proerty, "новые строки" ... p не будет добавлять поля или отступы в конце p внутри родительского блока (например, body ›section› p)."\ A" разрыв строки приводит к пробелу строки, эквивалентному стилизованной высоте строки.

Answer 3

Вы также можете использовать предварительно закодированный объект HTML для разрыва строки 
 в вашем контенте, и он будет иметь тот же эффект.

Answer 4

Вместо ручного добавления разрыва строки, вы можете реализовать border-bottom: 1px solid #ff0000, который будет принимать границу элемента и отображать только border-<side> с любой стороны, которую вы укажете.

Answer 5

Добавьте margin-top:20px; к #restart. Или какой-либо размер, который вы считаете подходящим. Если это встроенный элемент, вам придется добавить display:block или display:inline-block, хотя я не думаю, что inline-block работает на более старых версиях IE.