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

Question

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

Is there a way t

Answer 1

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 2

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 3

You can use \A escape sequence, which will render as a newline:

.new-line:after {
  white-space: pre-wrap;
  content: "\A";
}

This method was mentioned in the CCS 2.1 Specification for the content property:

Authors may include newlines in the generated content by writing the "\A" escape sequence in one of the strings after the 'content' property. This inserted line break is still subject to the 'white-space' property.