Can you add line breaks to the :after pseudo element?

css pseudo-element
NibblyPig picture NibblyPig · Nov 4, 2009 · Viewed 56.4k times · Source

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?

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

Robert Koritnik picture Robert Koritnik · Nov 4, 2009

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.

Related questions

Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)

Is there any way to select/manipulate CSS pseudo-elements such as ::before and ::after (and the old version with one semi-colon) using jQuery? For example, my stylesheet has the following rule: .span::after{ content:'foo' } How can I change 'foo' …

Read More
CSS :not(:last-child):after selector

I have a list of elements, which are styled like this: Outputs One | Two | Three | Four | Five | instead of One | Two | Three | Four | Five Anyone know how to CSS select all but the last element? You can see the definition …

Read More
Can I use a :before or :after pseudo-element on an input field?

I am trying to use the :after CSS pseudo-element on an input field, but it does not work. If I use it with a span, it works OK. <style type="text/css"> .mystyle:after {content:url(smiley.gif);} .…

Read More