Before :after psuedo element

HTML-CSS
1

step 34 in the quiz has us working with a new CSS and I’m baffled. the explanation here:
" css - Why do the :before and :after pseudo-elements require a 'content' property? - Stack Overflow"
Just makes me feel dumber if thats possible. I get only it has something to do with styling before or after some element.

2

What is your question exactly? Is it about the content property?

content
none
When applied to a pseudo-element, the pseudo-element is not generated. If applied to an element, the value has no effect.

normal
Computes to none for the ::before and ::after pseudo-elements.

So for pseudo-elements, the default computed value is none and when that is applied to pseudo-elements they are not generated. So we have to at least use an empty string (or some content).

content

3

I don’t understand its utility. it seems like an extra step? why not just add whatever “content” your adding by…adding it?
I love your visuals BTW, keep um coming.

4

First, we have to make a distinction between the pseudo-elements ::before and ::after and the content property.

For elements, it has only one purpose: specifying that the element renders as normal, or replacing the element with an image (and possibly some associated “alt text”).

For pseudo-elements and margin boxes, it is more powerful. It controls whether the element renders at all, can replace the element with an image, or replace it with arbitrary inline content (text and images).

Both fall into the same category of generated content using CSS, which is a bit of an oddity. The specs actually have a decent rundown and some examples.

https://drafts.csswg.org/css-content/

But you are not wrong, in a lot of cases you can just add the content to the HTML and use that. But there are a few cases like using CSS counters when it automates a process. The same can be said for the pseudo-elements, you can target an element and reuse the content for all the elements. For example, adding quotes around all p elements.

p::before {
  content: open-quote;
}

p::after {
  content: close-quote;
}

Or you can create classes for reuse, for example, it is used for clear fix utility classes.

The pseudo-elements can be used for a lot of weird things and not all of them are necessarily canonical or intended. It is one of those cases where there isn’t a single use or “correct” use. Sometimes, if all the content is CSS anyway, the element used for it might as well be generated in the CSS. It keeps the two things closer to each other and requires less context switching (going back and forth between the HTML and CSS).

There are edge cases where you do not have access to the HTML but you are able to add CSS. In which case CSS-generated content is a nice escape hatch. If you look at something like CSS Zen Garden you can see examples of this. I have used it a few times back in the days with CMS systems where you had no control over the HTML.

5

3 posts were merged into an existing topic: Tribute project

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.