What does ::before mean in css

"::before" in css means "before...". It is a pseudo-class element used to create a pseudo-element and set it as the first child element of the selected element. , inserted before other content of the element, the syntax is "element::before{style code}".

The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.

What does ::before mean in css

In css, ::before is a pseudo-class element that represents the generated content element , represents the first child element of the corresponding element's abstractable style, that is: the first child element of the selected element.

Use::before to insert the content to be inserted before other content of the element, and it will be displayed inline by default. ::before requires the content attribute to specify the value of the content.

::befor usage scenarios (such as adding an icon in front of an element)

<p class="test">
     2019/11/29 15:35:51
</p>//在这前面加一个小闹钟的图标就可使用::befor

.test::before
  {
   content: url(./1597910280\(1\).png);
 }

Same points:

1. Pseudo-class object, used to set the content before the object

2.::before and :before writing methods are equivalent

Differences:

: before is the way of writing Css2, ::before is the way of writing Css3

:before has better compatibility than ::before, but it is recommended to use ::before in H5 development

Instructions:

1. Pseudo-class elements must be used together with the content attribute

2. Pseudo-class elements are added by the css rendering layer and cannot be operated through js

3. Pseudo-class object special effects are usually activated through: hover pseudo-class style

I think this is a bit useless, you can use it or not.

The difference between pseudo elements and pseudo classes

• Pseudo classes

Pseudo classes are used to select between DOM trees information outside the scope, or information that cannot be represented by simple selectors. The former includes those elements that match the specified state, such as :visited, :active; the latter includes those elements in the DOM tree that meet certain logical conditions, such as :first-child, :first-of-type, :target. CSS pseudo-classes are used to add special effects to certain selectors.

• Pseudo elements

Pseudo elements are virtual elements that are not defined in the DOM tree. Unlike other selectors, it does not take the element as the smallest selection unit, it selects the specified content of the element. For example::before means the previous content of the selected element, that is, ""; ::selection means the selected content of the selected element. CSS pseudo-elements are used to set special effects to certain selectors.                  

2) Syntax difference

In CSS3, pseudo-classes and pseudo-elements are also grammatically different, and pseudo-elements are modified to start with

::. However, due to historical reasons, browsers continue to support pseudo-elements starting with :, but it is recommended to write them in the standard format starting with ::.

3) List of pseudo classes/pseudo elements

##:active:hover:link:visited:first-child:lang:focus:enable:disable:checked:target##

Select the element being activated	1
Select the element being hovered by the mouse	1
Select unvisited elements	1
Select The visited element	1
Select the element that is the first child element of its parent element	2
Select elements with the specified lang attribute	2
Select elements with keyboard input focus	2
Select each enabled Element	3
Select each disabled element	3
Select each selected element	3
Select the current anchor Point element	3

##: :first-letterSelect the first word of the specified elementSelect the specified The first line of the elementInserts content after the content of the specified elementInsert content before the content of the specified elementSelect the content selected by the user in the specified element

1		::first-line
1		::after
2		::before
2		::selection
3		The pseudo-class has the same priority as the class, and the pseudo-element has the same priority as the label. By the way, how to judge the priority is generally !important > inline style > ID selector > class selector > label > wildcard > inheritance > browser default attribute. There is also a simple calculation method. The weight of the inline style sheet is 1000, the weight of the ID selector is 100, the weight of the Class selector is 10, the weight of the HTML tag selector is 1, and the weight is actually It is not calculated in decimal. The numerical representation is just to illustrate the idea. We can add the rules in the selector and compare the weights. The larger the weight, the higher the priority. If the weights are the same, the previous styles will be replaced by the later ones. cover. (Learning video sharing: css video tutorial)

The above is the detailed content of What does ::before mean in css. For more information, please follow other related articles on the PHP Chinese website!