13

I am writing a HTML-editor using content-editable and I wanted to indicate line breaks (<br>) with a special character ("↩") at the end of each line that ends with a <br>. Therefore I wanted to add a pseudo-element ::after with that character as content.

br::after { content: ' ↩'; }

Unfortunately this doesn't work. ::before doesn't work either.

Is there another possibility to achieve the desired result?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
pvorb
  • 7,157
  • 7
  • 47
  • 74
  • 5
    You might want to refer to davehauser's answer in [this](http://stackoverflow.com/questions/3538506/which-elements-support-the-before-and-after-pseudo-elements?rq=1) thread. neither `:after` or `:before` works on elements like `img`, `br` etc. – Harry Oct 21 '13 at 15:33
  • Thanks for the hint. So probably I'll have to live with that or add an empty `` in front of every `
    `.     – pvorb Oct 21 '13 at 15:39
  • I guess so mate. Maybe leave the question open for some more time and see if you get any better suggestions :) – Harry Oct 21 '13 at 15:40
  • Fully related : http://stackoverflow.com/questions/3538506/which-elements-support-the-before-and-after-pseudo-elements – Milche Patern Oct 29 '13 at 18:48

3 Answers3

7

From this accepted answer : Which elements support the ::before and ::after pseudo-elements?

As you can read here http://www.w3.org/TR/CSS21/generate.html, :after only works on elements that have a (document tree) content. <input> has no content, as well as <img> or <br>.

Not funny, have you considered doing this with an image?

content: url(image.jpg)

This saying, i was designing something with ::before for a background-overlay on hover on an anchor.

I HAD to specify css content to empty {content=""} otherwize not displaying.

Community
  • 1
  • 1
Milche Patern
  • 19,632
  • 6
  • 35
  • 52
2

The :before and :after pseudo-elements are vaguely defined and poorly supported for elements like input. Your CSS code is not invalid, just not supported in browsers and not really defined in specs.

In an editor, which must be JavaScript-driven I presume, you can simply insert “↩” characters in the DOM (and remove them later if needed). Note, however, that “ ↩” has limited font support; a small image, scaled to the font size, might work better.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
2

I also wanted to display <br>in an web editor. When I add content to <br> it seems to get rendered differently, so that it accepts ::after, but the normal line break gets removed. I added it again with ::after through the utf8 line break (\000A), but I needed to change the white space rendering so that it gets displayed.

this worked for me:

.htmleditor br {
    content: "&nbsp;" !important;
}

.htmleditor br::after {
    content: "→\000A";
    white-space: pre;
}
yvess
  • 1,992
  • 19
  • 17
  • doesn't work for me – jor Dec 09 '21 at 11:38
  • Worked like a charm, thank you! Since you mentioned this is for an web editor, I also found that adding`display: block;` to `br` can prevent the caret from flickering when starting to input. – loikein Aug 25 '23 at 16:27