Shulou(Shulou.com)05/31 Report--

Today, the editor will share with you the relevant knowledge points about how to use pseudo elements in CSS. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look.

CSS pseudo element

CSS pseudo elements are used to add special effects to some selectors.

Syntax: syntax for CSS pseudo elements:

Selector: pseudo element {attribute: value;}

: first-line pseudo element

The "first-line" pseudo element in the CSS pseudo element is used to add a special style to the first line of text in a selector:

P {font-size:12pt} p:first-line {color:#0000FF;font-variant:small-caps;}

Sometextthatendsupontwoormorelines

In the above example, the browser displays * * lines formatted according to first-line pseudo elements. Browsers rely on the size of the browser window for branches.

Tip: first-line pseudo-elements can only be used for block-level elements.

Tip: the following attributes can be applied to first-line pseudo elements.

◆ font Properties

◆ color Properties

◆ background Properties

◆ word-spacing

◆ letter-spacing

◆ text-decoration

◆ vertical-align

◆ text-transform

◆ line-height

◆ clear

: first-letter pseudo element

The first-letter pseudo element in the CSS pseudo element is used to add a special style to the first letter of the text in a selector:

P {font-size:12pt;} p:first-letter {font-size:200%;float:left;}

Thefirstwordsofanarticle.

The effect of the output looks like:

_ | hefirst | wordsofan

◆ article.font Properties

◆ color Properties

◆ background Properties

◆ margin Properties

◆ padding Properties

◆ border Properties

◆ text-decoration

◆ vertical-align (only if float is none)

◆ text-transform

◆ line-height

◆ float

◆ clear

CSS pseudo elements and CSS class pseudo elements can be used with the CSS class:

A paragraph in a p.article:first-letter {color:#FF0000;} article.

The above example turns the first letter of all paragraphs whose class is article red.

Multiple CSS pseudo elements multiple pseudo elements can be used together:

P {font-size:12pt;} p:first-letter {color:#FF0000;font-size:24pt;} p:first-line {color:#0000FF;}

Thefirstwordsofanarticle

_ | hefirst | wordsofan

Article. In the above example, the first letter of the paragraph will be red with the font size 24pt. The rest of the first line will be blue, while the rest of the paragraph will be the default color.

CSS2-:before pseudo element

CSS pseudo-elements in before pseudo-elements can be used to insert something before an element.

The following styles play audio before the title:

H2:before {content:url (beep.wav);}

CSS2-:after pseudo element

The after pseudo-class in the CSS pseudo-element can be used to insert something after an element.

The following style plays audio after the title:

H2:after {content:url (beep.wav);} these are all the contents of the article "how to use pseudo elements in CSS". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

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.