CSS Pseudo-elements

A CSS pseudo-element is used to style specified parts of an element.
For example, it can be used to:
Style the first letter, or line, of an element
Insert content before, or after, the content of an element 
The syntax of pseudo-elements:
The ::first-line pseudo-element is used to add a special style 
to the first line of a text.
The following example formats the first line of the text in all <p> 
elements:
Note: The ::first-line pseudo-element can only be applied to block-level 
elements.
The following properties apply to the ::first-line 
pseudo-element:
font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
Notice the double colon notation -  ::first-line versus
:first-lineThe double colon replaced the single-colon 
notation for pseudo-elements in CSS3. This was an attempt from W3C to 
distinguish between pseudo-classes 
and pseudo-elements.The single-colon syntax was used 
for both pseudo-classes and pseudo-elements in CSS2 and CSS1.For 
backward compatibility, the single-colon syntax is acceptable for CSS2 and CSS1 
pseudo-elements.
The ::first-letter pseudo-element is used to add a special style to the first 
letter of a text.
The following example formats the first letter of the text in all <p> 
elements: 
Note: The ::first-letter pseudo-element can only be applied to block-level 
elements.
The following properties apply to the ::first-letter pseudo- element: 
 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
Pseudo-elements can be combined with HTML classes: 
The example above will display the first letter of paragraphs with class="intro", in 
red and in a larger size.
Several pseudo-elements can also be combined.
In the following example, the first letter of a paragraph will be red, in 
an xx-large font size. The rest of the first line will be blue, and in 
small-caps. The rest of the paragraph will be the default font size and color:
The ::before pseudo-element can be used to insert some content before the content of an element.
The following example inserts an image before the content of each <h1> element:
The ::after pseudo-element can be used to insert some content after the content of an element.
The following example inserts an image after the content of each <h1> element:
The ::marker pseudo-element selects the 
markers of list items.
The following example styles the markers of list items:
The ::selection pseudo-element matches the portion of an element that is 
selected by a user.
The following CSS properties can be applied to ::selection: 
color, 
background, cursor, and outline.
The following example makes the selected text red on a yellow background:
Set the background-color to red, of the first line of the paragraph.
<style>
 {
  background-color: red;
}
</style>

<body>

<p class="intro">
In my younger and more vulnerable years
my father gave me some advice that I've
been turning over in my mind ever since.
'Whenever you feel like criticizing anyone,' he told me,
'just remember that all the people in this world
haven't had the advantages that you've had.'
</p>

</body>

Start the Exercise
We just launchedW3Schools videos
Get certifiedby completinga course today!
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
help@w3schools.com
Your message has been sent to W3Schools.