Reasons for using the i tag as a small icon

Basic syntax

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

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

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, the element 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 property value to empty and just treat it as a box with little content. Like this:

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

However, you cannot completely remove the content attribute , and 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: "#";}	

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 the tag and all its content, you will still see two hash symbols on the page: one in the and another in the tag, and the browser will automatically Which one to create.

Characteristics of inserted content

As mentioned earlier, The inserted content is not visible in the source code of the page and can only be seen 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 textEditor

In this example, my highlighted style will be applied to the element inserted before and after the content of the target element.

Also note that the typical CSS inheritance rules apply to inserted elements. For example, if you have the font family 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 is injected into the target element? But, as mentioned above, this is not the case.

The injected content will be the child element of the associated target element, and the content pointed to by content will be placed in the child The "before" or "after" of element .

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

<p class="box">Other content.</p>	

The following is the css for inserting pseudo elements:

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;
}	

In this HTML, the text you are looking at has a class box and text like this "Other content" is in there (as you would see if you saw the source code of the homepage). In css, this content is set to a width, as well as some padding and visible borders

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

这里是浏览器中查看的结果：

外面的盒子是这个段落。围绕有散列符号的边框表示伪元素的边界。所以，不是插入“before”到段落，而是伪元素被置于到此段落的“Other content”的前面。

插入非文本内容

我简要的提醒，你可以把属性的值置为空字符串或是插入文本内容。你基本上有属性的值要包含什么的两个额外的选择

首先，你可以包含一个指向一个图像的URL，就像在css里包含一个背景图像一样做你能做的

p:before {  content: url(image.jpg);}	

注意不能使用引号。如果你将URL用引号括起来，那么它会变成一个字符串和插入文本“url(image.jpg)”作为其内容，插入的而不是图像本身。

当然，你可以包含一个Data URI代替图像引用，正如你可以用css背景一样。

你还可以选择attr(X)中的函数的形式。此功能，根据规范 ，“把X属性的值以字符串的形式返回”

下面是一个例子：

a:after {  content: attr(href);}	

attr（）函数的功能是什么？它得到特定属性的值并把它作为插入的文本成为一个伪元素。

上面的代码会导致页面上的每一个元素的href值立即被放置在每个各自的元素的后面。在文档被打印时，它可以用作一个包含所有URl的打印样式表。