Home  >  Article  >  Web Front-end  >  What do double colons represent in css3 attributes?

What do double colons represent in css3 attributes?

青灯夜游
青灯夜游Original
2022-03-18 18:09:132056browse

The double colon in the css3 attribute indicates that the attribute is a pseudo-element selector, which is a selector used to create some elements that are not in the DOM tree and add styles to them. CSS3 pseudo-elements include "::after", "::before", "::first-letter", "::first-line" and so on.

What do double colons represent in css3 attributes?

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

The double colon in the css3 attribute indicates that the attribute is a pseudo-element selector.

What is a pseudo element?

Pseudo elements are literally understood as "fake elements" or "disguised elements". In fact, it can be understood this way. Pseudo elements are actually virtual elements. Elements that do not exist (in code form), and you cannot find them in the document, so pseudo elements are virtual elements.

Pseudo element is a selector used to create some elements that are not in the DOM tree and add styles to them.

With pseudo-elements you can define styles for specific parts of the selected element without resorting to the element's ID or class attributes. For example, through pseudo-elements you can set the style of the first letter in a paragraph, or insert some content before or after the element, etc.

CSS provides a series of pseudo-elements, as shown in the following table:

# before each

element

##::first-letterp::first-letterMatches the first letter of the content in each

element

::first-linep::first-lineMatches the first line of content in each

element

::selectionp::selectionMatch the part of the element selected by the user::placeholderinput:: placeholderMatch the placeholder attribute of each form input box (such as )
Pseudo-elements Example Example description
::after p::after Insert after each

element Content

::before p::before Insert content
(Learning video sharing:

css video tutorialweb front end

The above is the detailed content of What do double colons represent in css3 attributes?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn