Why is it necessary to add the attribute 'content' to a pseudo-class like :after or :before in css?

Answer 1

It is a bit weird because we usually don't use CSS to put essentially new HTML nodes onto the page, but :before and :after are an exception.

What we can do in theory is style all :after elements on a page, without them even existing:

*:after {
color: red;
}

This does not actually create anything new on the page. We could then add a

a:after {
content: 'This is a link';
}

To get some (red) text in the after element of links. By setting `content` we are actually creating the after element.

Honestly in my opinion that might have been a design mistake. Maybe having the :before and :after elements be `display: none;` by default and making them appear by setting `display: block;` would be more consistent with how we usually use CSS. But I'm sure the CSS committee has reasons on why they did it that way and I didn't think it through.

`content` is `none` by default which is why even `content: ''` makes the element show up.

Answer 2

Schindlabua thanks