Insert a line break before an element using CSS only

To achieve this you need two things:

  • use the \A escape sequence character in content part of ::before selector and
  • add white-space: pre; style to the same selector.

This will force new line before that page element.

Same goes for  ::before selector of course.


.post-date::before {
  content: "(";
  color: silver


.post-date::before {
  content: "\A(";
  color: silver;
  white-space: pre-line

And that’s all.


Leave a Reply