73

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.

JJJ
  • 31,545
  • 20
  • 84
  • 99
NibblyPig
  • 46,891
  • 62
  • 180
  • 311
  • 1
    See this questiosn: [Adding HTML entities using CSS content](http://stackoverflow.com/questions/190396/adding-html-entities-using-css-content) Although based on other answers it sounds like even that won't work... – roryf Nov 04 '09 at 10:31
  • See: https://css-tricks.com/pseudo-element-roundup/ – cssyphus Jul 24 '15 at 15:19

3 Answers3

71

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.

johannchopin
  • 7,327
  • 6
  • 22
  • 62
Robert Koritnik
  • 97,460
  • 50
  • 267
  • 388
  • Works perfectly, thanks. It's an internal software project and all computers are running IE8 so I don't mind using complex css :) – NibblyPig Nov 04 '09 at 10:39
14

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.

Dmitry Schetnikovich
  • 1,692
  • 17
  • 25
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;
}
David Snabel-Caunt
  • 56,156
  • 12
  • 108
  • 132