How can I use CSS:before to add newline before an element???

That is the question that I researched today. My answer was semi-satisfying. I found that you can, and can’t do it … kinda.

What does that mean? Well, the intuitively obvious ways don’t work. The CSS method I did find will work on all browsers except the wonderful IE browser. What else in new! Love you IE …

In my situation, I wanted to customize where a link (<a>) was sitting. It was embedded in generated text I couldn’t touch. I wanted the link on the next line to highlight its existence.

I tried several things that didn’t work and wasn’t surprised by the results:

• Adding ‘ a { display: block ; } ‘ does not work, not a surprise.
• Adding ‘ a:before {content: “<br/>” ; } ‘ doesn’t work, the content is processed as text, not as a tag.
• Adding ‘ a:before {content: “\n” ; } ‘ failed as badly as the others … not a surprise.

What surprised me was the following works, on browsers other than IE:

• a:before {content: “\\A” ; white-space: pre-wrap ; }

There is no CSS solution, but, there is a jQuery solution. Try jQuery:

• $(“<br/>”).insertbefore(“a”)