Replacing <br> Tags with CSS for a Cleaner, More Semantic Layout

Today I needed to change some code within a project I am working on. The <br> needed to be removed from the HTML. The reason why I used a <br> here was because I needed to align the text to the second row. Normally, I wouldn't opt to use a <br> here, but since margin-top was not working — as it did not match the actual line height — I had to resort to this solution.​

​​<div>
    <br>
    some text
</div>

After a bit of searching on the internet, I found out that you could replace the <br> with the code below. By adding a ::before pseudo-element with content: "\A", you can simulate a line break. \A is the CSS escape sequence for a line feed character — in simpler terms, it means “new line.” In other languages, \n or \r is used for this, but not in CSS.​

div::before {
  content: "\A";
  white-space: pre;
}​

And as far as I have seen, it is working like a charm. I still think that margin-top: 1lh; might also work — I still have to test it, though.

I hope you don't mind this brief blog post. I also hope that this small CSS trick will come in handy someday, but it might be especially useful when you're trying to fine-tune layout without compromising semantic markup.