Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

<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?

like image 242
pvorb Avatar asked Oct 21 '13 15:10

pvorb


People also ask

What are :: after and :: before?

Definition and UsageThe ::before selector inserts something before the content of each selected element(s). Use the content property to specify the content to insert. Use the ::after selector to insert something after the content. Version: CSS2.

What is the use of :: before?

::before. In CSS, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.

What is the difference :: before and before?

The only difference is that the double colon is used in CSS3, whereas the single colon is the legacy version. Reasoning: The ::before notation was introduced in CSS 3 in order to establish a discrimination between pseudo-classes and pseudo-elements. Browsers also accept the notation :before introduced in CSS 2.

When would you use the :: before or :: after pseudo-element in your CSS?

Get started with $200 in free credit! CSS ::before and ::after pseudo-elements allow you to insert “content” before and after any non-replaced element (e.g. they work on a <div> but not an <input> ). This effectively allows you to show something on a web page that might not be present in the HTML content.


3 Answers

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.

like image 55
Milche Patern Avatar answered Nov 15 '22 11:11

Milche Patern


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.

like image 34
Jukka K. Korpela Avatar answered Nov 15 '22 11:11

Jukka K. Korpela


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;
}
like image 23
yvess Avatar answered Nov 15 '22 12:11

yvess