Can you use the :after pseudo element to add html?

Question

I want to append a <br /> to a particular class. Using the :after pseudo class simply displays <br /> as text.

Is there a way to make this work?

Edit:

It's internal for IE8 so browser issues aren't a problem... if I do

<span class="linebreakclass">cats are</span> brilliant

I want brilliant to appear on a new line...

Answer 1

It gets worse - the :after class doesn't even work in IE6 (and probably some other browsers too).

I think what you really want here is a margin on the bottom of the element, to provide spacing.

Simply

.myElement {
    margin-bottom: 1em;
}

Answer 2

You won't be able to render HTML tags but you can set style like this:

.needs-space:after
{
    content: " ";
    display: block;
    clear: both; /* if you need to break floating elements */
}

The main setting here is display: block; This will render :after content inside a DIV. And this pseudo element is supported by all latest browsers. Including IE. Saying this you should be aware of your users and their browsers.

Answer 3

See this questiosn: Adding HTML entities using CSS content

Although based on other answers it sounds like even that won't work...