Shulou(Shulou.com)06/02 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.