CODEWITHSUNDEEP
htmlcsspseudo-element
pvorb
pvorb

Reputation: 7279

<br> and ::after or ::before

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?

Upvotes: 14

Views: 9543

Answers (3)

yvess
yvess

Reputation: 2114

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

Upvotes: 4

Milche Patern
Milche Patern

Reputation: 20442

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.

Upvotes: 7

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201528

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.

Upvotes: 2

Related Questions