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

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.

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.

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.

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;
}

You can either add a custom icon from your assets, by doing simply ..

 &:after {
    content: url('~content/icons/drop-down-arrow.png');
  }