What are pseudo elements in CSS?

Pseudo elements in CSS

The pseudo elements allow you to style element or its part without adding any ID and Class to them. There may be situations in your coding when there is need to style an element directly without any ID and Classes. In those cases the pseudo elements can be used. There may also be situations when you want to style first letter or first line of your paragraph or when you want to insert something before or after an element.

In CSS3, there is another way to define pseudo elements and that is (::). The general syntax of pseudo elements is shown below:

selector : pseudo element {property:value;}

Let us now study some important pseudo elements:

The ::first-line pseudo element

The ::first-line pseudo element applies special style to the text of first line of paragraph. Let us write its code and try to understand its result:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo elements</title>
    <style>
        .container{
            border:2px solid black;
            width:40%;
        }
        p#one::first-line{
            color:rgb(27, 80, 179);
            text-decoration: underline;
            font-weight: bold;
        }
        p#two::first-line{
            color:rgb(12, 172, 12);
            text-decoration: underline;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container">
        <p id="one">CSS stands for Cascading Style Sheets.
            CSS describes how HTML elements are to be     
 displayed on screen, paper, or in other media.
            CSS saves a lot of work. It can control the layout of multiple web pages all at once.
            External stylesheets are stored in CSS files.
        </p>
        <p id="two">
CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. It aone to adapt the presentation to different types of devices, such as large screens, small screens, or printers. CSS is
            independent of HTML and can be used with any XML-based markup language.
        </p>
    </div>
    </body>
</html>
The ::first-line pseudo element, www.programmingtutorial.in

The ::first-letter Pseudo-element

The ::first-letter pseudo element applies special style to the first letter of first line of paragraph. Let us write its code and try to understand its result:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo elements</title>
    <style>
        .container{
            border:2px solid black;
            width:40%;
        }
        p#one::first-letter{
            color:rgb(27, 80, 179);
            text-decoration: underline;
            font-weight: bold;
        }
        p#two::first-letter{
            color:rgb(12, 172, 12);
            text-decoration: underline;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container">
        <p id="one">CSS stands for Cascading Style Sheets.
        </p>
        <p id="two">
            CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. 
        </p>
    </div>   
</body>
</html>
The ::first-letter Pseudo-element

The ::before and :: after pseudo elements

The ::before and ::after pseudo elements insert content before and after existing content respectively. The content CSS property is used in conjunction with these pseudo-elements, to insert the generated content. You can insert regular strings of text or an embedded object such as image and other resources using these pseudo-elements.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo elements</title>
    <style>
p#one::before{
content:"This sentence is placed before first paragraph. ";
            color:red;
            font-weight:bold;
            text-decoration: underline;
        }
        .container{
            border:2px solid black;
            width:40%;
        }
        p#two::after{
            content:"This sentence is placed after second paragraph. ";
            color:rgb(8, 150, 44);
            font-weight:bold;
            text-decoration: underline;
        }   
    </style>
</head>
<body>
    <div class="container">
        <p id="one">CSS stands for Cascading Style Sheets.
        </p>
        <p id="two">
            CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. 
        </p>
    </div>   
</body>
</html>
The ::before and :: after pseudo elements

You may also like to read

What are pseudo classes in CSS?