CODEWITHSUNDEEP
csspseudo-element
NibblyPig
NibblyPig

Reputation: 52942

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.

Upvotes: 78

Views: 60926

Answers (4)

Smaillns
Smaillns

Reputation: 3127

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

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

Upvotes: 1

Robert Koritnik
Robert Koritnik

Reputation: 105029

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.

Upvotes: 73

Dmitry Schetnikovich
Dmitry Schetnikovich

Reputation: 1782

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.

Upvotes: 16

David Snabel-Caunt
David Snabel-Caunt

Reputation: 58361

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

Upvotes: 1

Related Questions