Geek Answers Handbook

What is the meaning: before and: after pseudo-element selectors in CSS?

I used CSS pseudo-element selectors, like so many others, basically just to say that I used them.

But I rack my brains and struggle to find the reason for my place along with the markup.

Take the following example:

<p>Hello</p> p:after { content: "*"; }

What is the advantage of using this method using <span> tags?

I missed the point :before and :after ? Is there any serious reason to use them over existing semantic markup?

+4
source share
5 answers

The CSS2.1 specification talks about generated content:

In some cases, authors may want user agents to display content that does not come from the tree. One familiar example of this is a numbered list; the author does not want to explicitly indicate the numbers; he or she wants the user agent to automatically generate them. Similarly, authors may want the user agent to insert the word “picture” before the title of the picture or “Chapter 7” before the title of the seventh chapter. In particular, for audio or brailers, user agents must be able to insert these lines.

Basically, the goal is to minimize the contamination of the content structure with “content,” which would otherwise be more suitable as presentation elements or better automated.

+6
source

I think that :before and :after were in CSS2, but aside from pedantry, these specific pseudo-elements are intended to add “content”, which is really just visual help.

A prime example is the addition of quotation marks around the <q> element, which Firefox uses these selectors in the default stylesheet. Some people also use them to clean pop-ups.

You should not use them for actual content, despite the name of the CSS content property, since non-visual user agents (such as screen readers) should ignore them.

Ive never come up with a lot of good for them, although I once used them to add small Unicode icons to freeze links on a personal site - like you, pretty much just to say that Id used them.

+2
source

If you are talking about :before and :after : they are used as presentation elements for cases where adding more elements to the actual document will mix the structure with the appearance. A few cases that I have seen:

  • Bullets in bulleted lists
  • Quotes around q elements.
  • Stylish shadows
  • Decorations and the beginning or end of the text
+2
source

CSS3 pseudo-elements also include such important ones as: link ,: hover ,: active ,: focus ,: first-child ,: nth-child. It is impossible to make a useful site without most of them.

As for the less commonly used pseudo selectors like: after and: before, they are useful in some cases where the content is dynamically generated and you want to insert something in front of a specific element or tag.

+1
source

Honestly, the only appropriate use is to make the elements have the correct size in dom. Use this code, for example:

 <div class="container"> <div>this div is floated left</div> <div>this div is floated left</div> </div>

Usually you need to specify the exact or minimum height for the div.container. if you applied the “after” using very simple CSS, any background that you applied to the .container would actually display (in almost every browser) correctly, with a small amount of padding.

 .container:after{ content:'.'; height:0; line-height:0; display:block; float:left; visibility:hidden; }

Now try this example with a background color or image, and you will see that the div.container div always has the appropriate height (which will be the total total height of the internal content), even if the entire internal html (as in most ul / li css buttons).

I also use after on every div, which I transfer all my content to every html page. This is due to the possibility of placing all the content on this page, and I want to make sure that my content div always has the correct size / padding with the appropriate background.

+1
source

More articles:


All Articles