CSS pseudo elements are used to add special effects to some selectors.
CSS pseudo Element (pseudo-elements) instance:
<style type= "Text/css" >
{
Color: #ff0000;
Font-size:xx-large
}
</style>
<body>
<p>
can use The:first-letter pseudo-element to add a special effect to the ' a ' a text!
</p>
</body>
<style type= "Text/css" >
{
Color: #ff0000;
Font-variant:small-caps
}
</style>
<body>
<p>
can use The:first-line pseudo-element to add a special effect to the "a" of a text!
</p>
</body>
Grammar:
Syntax for pseudo-elements:
selector:pseudo-element {Property:value}CSS classes can also be used in conjunction with pseudo elements:
selector.class:pseudo-element {Property:value}: First-line pseudo Element
The "First-line" 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}<p>some text that ends up on two or more lines< ;/p>In the above example, the browser displays the first line formatted according to the First-line pseudo element. Browsers rely on the size of the browser window to branch.
Hint: first-line pseudo elements can only be used for block-level elements.
Hint: The following attribute can be applied to the first-line pseudo element.
: First-letter pseudo Element
The first-letter pseudo element is used to add a special style to the first letter of text in a selector:
p {font-size:12pt} p:first-letter {font-size:200%; float:left}<p>the-words-a article.</p>The output works like this:
___ | He | Words of Anarticle.
Pseudo elements and CSS classes
Pseudo elements can be used in conjunction with CSS classes:
p.article:first-letterclass="article"> A paragraph in the article. </p>
The example above will change the first letter of all class-article paragraphs to red.
Multiple pseudo elements
Multiple pseudo elements can be used in conjunction with:
p{font-size:12pt;}p:first-letter{color: #FF0000; font-size:24pt;}p:first-line{color: #0000FF;} <p>the the words of an article</p>
The output works like this:
__ | He | Words of Anarticle.
In the example above, the first letter of the paragraph will be a red with a font size of 24pt. The rest of the first line will be blue, and the rest of the paragraph will be the default color.
CSS2-: Before pseudo element
Before pseudo elements can be used to insert certain content before an element.
The following style plays the audio before the caption:
H1:before{content:url (beep.wav)}
CSS2-: After pseudo element
After pseudo classes can be used to insert some content after an element.
The following style will play the audio after the title:
H1:after{content:url (beep.wav)}
Pseudo element
browser support :IE: Internet Explorer, F: Firefox, N: Netscape.
The number of the "CSS1" column shows the CSS standard definition of the attribute background (or CSS2).
| pseudo Element | function | IE | F | N | TheConsortium |
|---|---|---|---|---|---|
| : First-letter | Add a special style to the first letter of the text | 5 | 1 | 8 | 1 |
| : First-line | Add a special style to the first line of text | 5 | 1 | 8 | 1 |
| : Before | Insert some content before an element | 1.5 | 8 | 2 | |
| : After | Insert some content after an element | 1.5 | 8 | 2 |
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
