Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

CSS | Pseudo Elements

  • Last Updated : 12 Sep, 2021

A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected elements. For Example, Styling the first letter or line of an element,

Insert content before or after the content of an element. All of these can be done using Pseudo Elements in CSS.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

Note that in contrast to pseudo-elements, pseudo-classes can be used to style an element based on its state.

Syntax: 



selector::pseudo-element {
 property: value;
}

There are many Pseudo Elements in CSS but the ones which are most commonly used are as follows:

  • ::first-line Pseudo-element applies styles to the first line of a block-level element. Note that the length of the first line depends on many factors, including the width of the element, the width of the document, and the font size of the text. Note that only a few properties are applied for first-line pseudo-element like font properties, color properties, background properties, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height, clear, etc.

Example:

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>first-line Demo</title>
    <style>
        body{
          background-color:whitesmoke;
          color:green;
          font-size: large;
          text-align: center;
      }
       
        p::first-line{
          color:Red;
          font-weight: bold;
      }
    </style>
</head>
<body>
    <h1>Geeks For Geeks</h1>
    <h2>::first-line element</h2>
     
 
<p>This is a paragraph using first-line pseudo-element
      to style first line of the paragraph.Content in the
      first line turns red and becomes bold.</p>
 
 
</body>
</html>

Output:

  • ::first-letter Pseudo-element applies styles to the first letter of the first line of a block-level element, but only when not preceded by other content (such as images or inline tables). Note that only a few properties are applied for first-line pseudo-element like font properties, color properties, background properties, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height, clear, etc.

Example:

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>first-letter Demo</title>
    <style>
        body{
          background-color:whitesmoke;
          color:green;
          font-size: large;
          text-align: center;
      }
        p::first-letter{
          color:Red;
          font-size: 30px;
          font-weight: bold;
      }
    </style>
</head>
<body>
    <h1>Geeks For Geeks</h1>
    <h2>::first-letter element</h2>
     
 
<p>This is a paragraph using first-letter pseudo-element
      to style first letter of the paragraph.first-letter element
      turned the first letter of this paragraph to red
      and made it bold.</p>
 
 
</body>
</html>

Output:

  • ::before Pseudo-element creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.

Example:



HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>before Demo</title>
    <style>
        body{
          background-color:whitesmoke;
          color:green;
          font-size: large;
          text-align: center;
      }
        p::before{
          content: '"';
          color: red;
          font-size: 30px;
      }
    </style>
</head>
<body>
    <h1>Geeks For Geeks</h1>
    <h2>::before element</h2>
     
 
<p>This is a paragraph to which we added red color quotation marks
      using ::before element.</p>
 
 
</body>
</html>

Output:

  • ::after Pseudo-element creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.

Example:

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>after Demo</title>
    <style>
        body{
          background-color:whitesmoke;
          color:green;
          font-size: large;
          text-align: center;
          }
        p::after{
          content: '"';
          color: red;
          font-size: 30px;
        }
    </style>
</head>
<body>
    <h1>Geeks For Geeks</h1>
    <h2>::after element</h2>
     
 
<p>This is a paragraph to which we added red color quotation marks
      using ::after element.</p>
 
 
</body>
</html>

Output:

  • ::marker Pseudo-element selects the marker box of a list item, which typically contains a bullet or number. It works on any element or pseudo-element set to display: list-item, such as the <li> and <summary> elements.

Example:

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>marker Demo</title>
    <style>
        body{
          background-color: whitesmoke;
          color: green;
          text-align: center;
        }
        ul{
          width: 40px;
        }
        ul li::marker{
          color: red;
          font-size: 30px;
        }
    </style>
</head>
<body>
    <h1>Geeks For Geeks</h1>
    <h2>::marker element</h2>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</body>
</html>

Output: 

  • ::selection Pseudo-element applies styles to the part of a document that has been highlighted by the user such as clicking and dragging the mouse across the text.

Example:

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>selection Demo</title>
    <style>
        body{
            background-color: whitesmoke;
            color: green;
            text-align: center;
        }
        p::selection{
            color: red;
            background-color: green;
            font-size: 30px;
        }
        ::selection{
            color: green;
            background-color: red;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <h1>Geeks For Geeks</h1>
    <h2>::selection element</h2>
     
 
<p>Content in this paragraph turns red with
      green background on selection.</p>
 
 
    <span>As this is not a paragraph, you can notice red
      background and green text on selection.</span>
</body>
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!