CSS Pseudo Elements

CSS Pseudo Elements

CSS pseudo-elements are used to add special effects to some selectors. You do not need to use JavaScript or any other script to use those effects.

A pseudo-class starts with a colon (:). Its syntax can be given with:

selector:pseudo-element { property: value; }

All CSS Pseudo Elements

Selector Example Example description
::after p::after Insert something after the content of each <p> element
::before p::before Insert something before the content of each <p> element
::first-letter p::first-letter Selects the first letter of each <p> element
::first-line p::first-line Selects the first line of each <p> element
::selection p::selection Selects the portion of an element that is selected by a user

The ::after Pseudo-element

The ::after selector inserts something after the content of each selected element(s).

Example

    <!DOCTYPE html>
<html>
<head>
<style>
p:after
    {
    content: url(/images/bullet.gif)
}
</style>
</head>
<body>
<p>This line will be succeeded by a star.</p>
<p>This line will be succeeded by a star.</p>
</body>
</html>
Try it with the Editor

The ::before Pseudo-element

The ::before selector inserts something before the content of each selected element(s).

Example

    <!DOCTYPE html>
<html>
<head>
<style>
p:before
     {
      content: url(/images/bullet.gif)
}
</style>
</head>
<body>
<p>This line will be preceded by a star.</p>
<p>This line will be preceded by a star.</p>
</body>
</html>
Try it with the Editor

The ::first-letter Pseudo-element

The ::first-letter selector is used to add a style to the first letter of the specified selector.

The following properties can be used with ::first-letter:

Example

    <!DOCTYPE html>
<html>
<head>
<style>
p:first-letter { 
          font-size: 5em; 
}
p.normal:first-letter { 
          font-size: 10px; 
}
</style>
</head>
<body>
<p class="normal">First character of this paragraph will be normal and will have font size 10 px;</p>
<p>The first character of this paragraph will be 5em big  as  defined in the CSS rule above. Rest of the characters in this paragraph will remain normal. This example shows how to use :first-letter pseduo element to give effect to the first characters  of any HTML element.</p>
</body>
</html>
Try it with the Editor

The ::first-line Pseudo-element

The ::first-line selector is used to add a style to the first line of the specified selector.

The following properties can be used with ::first-line:

Example

    <!DOCTYPE html>
<html>
<head>
<style>
p:first-line { 
        text-decoration: underline; 
}
p.noline:first-line {
        text-decoration: none; 
}
</style>
</head>
<body>
<p class="noline">This line would not have any underline because this belongs to  nline class.</p>
<p>The first line of this paragraph will be underlined as defined in the CSS rule above. Rest of the lines in this paragraph will remain normal. This example shows how to use :first-line pseduo element to give effect to the first line of any HTML element.</p>
</body>
</html>
Try it with the Editor

The ::selection Pseudo-element

The ::selection selector matches the portion of an element that is selected by a user.

Example

    <!DOCTYPE html>
<html>
<head>
<style>
::selection {
    color: red;
    background: yellow;
}
</style>
</head>
<body>
<h1>Select some text on this page:</h1>
<p>This is a paragraph.</p>
<div>This is some text in a div element.</div>
</body>
</html>
Try it with the Editor