What are the pseudo element selectors in css3
This article mainly introduces the pseudo-element selector in css3, which has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.
Css3 pseudo-element selectors are: 1, ":: after", insert content after the content of the selected element; 2, ":: before", insert content before the content of the selected element; 3, ":: first-letter"; 4, ":: first-line"; 5, ":: selection".
The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.
The CSS pseudo element is used to style the specified part of the element.
For example, it can be used to:
Set the style of the first letter and first line of the element
Insert content before or after the content of an element
The css3 pseudo-element selectors are
Selector description example description:: after inserts content after the content of the selected element. (use the content attribute to specify what to insert) p::after in each
Insert content after the element. :: before inserts content before the content of the selected element. (use the content attribute to specify what to insert) p::before in each
Insert content before the element. :: first-letter is used to select the initials of the specified selector. P::first-letter selects each
The initials of the element. :: first-line is used to select the first line of the specified selector. P::first-line selects each
The first line of the element. :: selection matching is part of the selection selected by the user. (supported properties color, background, cursor, and outline. P::selection selects the part of the element selected by the user
:: first-line pseudo element
:: first-line pseudo elements are used to add special styles to the first line of text.
Note: first-line pseudo elements can only be applied to block-level elements.
The following attributes apply to:: first-line pseudo elements:
Font Properti
color property
Background attribute
Word-spacing
Letter-spacing
Text-decoration
Vertical-align
Text-transform
Line-height
Clear
Example: for all
Add a style in the first line of the element
P::first-line {color: # ff0000; font-variant: small-caps;}
You can use the:: first-line pseudo element to add special effects to the first line of text. Some more words. More and more.
:: first-letter pseudo element
:: first-letter pseudo elements are used to add special styles to the first letter of text.
Note: first-letter pseudo-elements only apply to block-level elements.
The following attributes apply to:: first-letter pseudo elements:
Font Properti
color property
Background attribute
Outer margin attribut
Inside margin attribut
Border Properti
Text-decoration
Vertical-align (only if "float" is "none")
Text-transform
Line-height
Float
Clear
Example: for all
Add a style in the first line of the element
P::first-letter {color: # ff0000; font-size: xx-large;}
You can use the:: first-letter pseudo element to add special effects to the first character of the text!
:: before and:: after pseudo elements
:: before pseudo-elements can be used to insert some content before the content of the element.
:: after pseudo-element can be used to insert some content after the content of the element.
P::before {content: "Hello,";} p:after {content: "- lines";}
I'm Donald Duck.
I live in Duckburg.
:: selection pseudo element
:: selection pseudo element matches the part of the element selected by the user.
The following CSS attributes can be applied to:: selection:
Color
Background
Cursor
Outline
The following example displays the selected text in red on a yellow background:
Example:
::-moz-selection {/ * Code for Firefox * / color: red; background: yellow;}:: selection {color: red Background: yellow;} Please select the text on this page:
This is a paragraph.
This is the text in the div element.
Note: Firefox supports the alternative::-moz-selection attribute.
Thank you for reading this article carefully. I hope the article "what are the pseudo-element selectors in css3" shared by the editor will be helpful to you. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!
