问题
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?
回答1:
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.
回答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.
来源：https://stackoverflow.com/questions/19498706/br-and-after-or-before