Analysis on the use of before and :after pseudo-elements in CSS-CSS Tutorial-php.cn

This article mainly introduces the detailed use of before and :after pseudo-elements in CSS, including the use of insertion operations for some non-text content. Friends in need can refer to it

If you have been paying close attention From various web design blogs, you may have noticed that the :before and :after pseudo-elements have gained quite a bit of attention in front-end development. Especially in Nicolas Gallagher's blog, many pseudo-class elements were used later.
2015527152013288.png (500×334)

Nicolas Gallagher used pseudo-elements to create 84 GUI icons with static HTML tags.

To complement the above (and capitalize on current trends), I've collected a few things that run entirely under pseudo-elements. This article is mainly aimed at this group of people, that is, they have seen cool things made with pseudo elements, but want to know all about the use of before in CSS technology.

Although the CSS specification contains other pseudo-elements, our focus is :before and :after. So, for the sake of simplicity, when I say "pseudo-elements" I refer to these two particular pseudo-elements in general.
What can pseudo elements do?

"Pseudo elements", as the name suggests. It creates a fake element and inserts it before or after the content of the target element.

The word "pseudo" is the English translation of the Greek, and its basic meaning is "lying, dishonest, wrong." So the name pseudo-element is appropriate. Because in the documentation it doesn't actually change anything. Instead, they are ghost-like elements inserted into CSS that are visible to the user and can be controlled via CSS.
Basic Syntax

:before and :after pseudo-element coding is very simple (like most css properties, it does not require a lot of prefixes). Here is a simple example.

#example:before { content: "#"; } #example:after { content: "."; }

Copy after login

Two things are mentioned in this example. First, we use #example:before and #example:after to target the same element. Strictly speaking, they are pseudo-elements in the code.

Second, as mentioned in the content module, pseudo-elements are useless if the "content" attribute is not set.

In this example, elements with the id attribute will have a hash symbol placed before the content, and a period after the content.
Syntax Notes

You can set the content attribute value to empty and just treat it as a box with little content. Like this:

#example:before { content: ""; display: block; width: 100px; height: 100px; }

Copy after login

However, you cannot completely remove the content attribute. If you do, the pseudo-element will not work. At a minimum, the content property requires a null reference as its value (i.e. :content:"").

You may notice that you can also write pseudo-elements using two colons (::before and ::after), which I have discussed before. The short explanation is that there is no difference between the two syntaxes. The only difference is that the pseudo-element (double colon) and the pseudo-class in CSS3 are (single colon)

Finally, in terms of syntax. Technically, you can apply pseudo-elements generally, rather than on specific elements, like this:

:before { content: "#"; }

Copy after login

While the above is valid, it's pretty useless. The code inserts a hash symbol before the content of each element in the DOM. Even if you delete thetag and all its content, you will still see two hash symbols on the page: one in theand another in thetag, and the browser will automatically Which one to create.
Characteristics of inserted content

As mentioned earlier, inserted content is not visible in the source code of the page. Visible only in CSS

Also, inserted elements are inline elements by default (or, in HTML5, in the category of textual semantics). Therefore, in order to give an inserted element height, padding, margins, etc., you usually have to explicitly define it as a block-level element.

This will be a brief explanation of how to design pseudo elements, look at this picture of my text editor below
2015527152044668.jpg (500×324)

In this example, I highlight The style will be applied to the element inserted before and after the content of the target element.

Also note that typical CSS inheritance rules apply to inserted elements. For example, if you have the font families Helvetica, Arial, and Sans Serif applied to the body element, then the pseudo-element will inherit these font families just like any other element.

Similarly, pseudo-elements will not inherit styles that are not naturally inherited from parent elements (such as padding and margins).
What comes before or after?

Your intuition is that the :before and :after pseudo-elements may be injected before or after the inserted content will be injected into the target element. But, as mentioned above, this is not the case.

The injected content will be a child element of the associated target element, but it will be placed "before" or "after" any content of this element.

To prove this, take a look at the code below. First, in the HTML:

Other content.

Copy after login

Here is the css to insert the pseudo element:

p.box { width: 300px; border: solid 1px white; padding: 20px; } p.box:before { content: "#"; border: solid 1px white; padding: 2px; margin: 0 10px 0 0; }

Copy after login

在此html里，你所看的一段文字带有的是一个类的box，还有这样的文字“Other content”在里面（像你所会看到的一样，如果你看见了首页的源代码）。在css中，这段内容被设置了宽度，以及一些padding和可见的边框

然后我们有了伪元素。在这个例子中，它是一个散列符号插入到该段内容之前。随后css给了它一个边框以及一些padding和margins。

这里是浏览器中查看的结果：
2015527152119859.jpg (500×175)