Table of contents
1.
Introduction
2.
Pseudo-Element
2.1.
::first-letter
2.2.
::first-line
2.3.
::before
2.4.
::after
2.5.
::marker
2.6.
::selection
3.
Frequently Asked Questions
3.1.
What is a pseudo-element?
3.2.
What is the use of ::before pseudo-element?
3.3.
Why are we using a double colon instead of the single colon in syntax?
3.4.
What is the core difference between HTML and CSS?
3.5.
Why do we use CSS?
4.
Conclusion
Last Updated: Mar 27, 2024
Medium

CSS Pseudo-Element

Author Sagar Mishra
1 upvote
Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

Hey Ninjas! Welcome back to the blog. You must have made a website using HTML (Hypertext Markup Language) in web designing. Isn't it exciting to create and show the innovation inside you? Decorating web pages is also one of the fun tasks using CSS (Cascading Styling Sheets). 

CSS Pseudo Elements

In this blog, we will discuss the topic of CSS Pseudo-element in detail. Before moving ahead, let's first understand what pseudo-element are.

Pseudo-Element

A pseudo-element in CSS is a keyword added to a selector that helps us style some parts of the selected elements. For example, you can style the first letter of your paragraph as per your choice. Also, you can add content before and after the element's content. There is no need for Javascript while using the pseudo-element.

Below is the syntax of the CSS Pseudo-Element:

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


In the syntax of the CSS pseudo-element, we use a double colon notation (::). In CSS3, the double colon is replaced by the single colon notation for CSS pseudo-elements.

Now, Let’s discuss the widely used CSS Pseudo-Elements.

::first-letter

As the name says, the "::first-letter" pseudo-class class helps you to style the first letter of the first line of a block-level element. One limitation is that it applies style only when it is not preceded by other content, such as images or inline tables.

<!DOCTYPE html>
    <head>
        <style>
            p::first-letter {
                color: red;
                font-size: 50px;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <h2>Welcome to Coding Ninjas</h2>
        <p>
            At Coding Ninjas, our mission is to continuously
            innovate the best ways to train the next generation
            of developers and to transform the way tech
            education is delivered.
        </p>
    </body>
</html>


Output:

Output

Explanation:

As you can see, the first letter of the paragraph has a different styling than other letters in the paragraph. You can add other properties too in the first letter, like padding, margin, font properties, etc.

::first-line

The '::first-line' pseudo-element styles to the first line of the element. Here, note that the first line's length depends on many criteria, like the document's width, elements' width, and text's font size. 

<!DOCTYPE html>
    <head>
        <style>
            p::first-line {
                color: red;
                font-size: 50px;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <h2>Welcome to Coding Ninjas</h2>
        <p>
            At Coding Ninjas, our mission is to continuously
            innovate the best ways to train the next generation
            of developers and to transform the way tech
            education is delivered.
        </p>
    </body>
</html>


Output:

Output

Explanation:

In the last example, the first letter was styled, but using    '::first-line', we can style the complete line.

::before

The next element is "::before". Using this pseudo-element, you can add any text before the content part. You can use the "content" property to define the additional content. 

Note: You cannot add images before the content using this '::before' pseudo-element.

<!DOCTYPE html>
    <head>
        <style>
            p::before {
                color: red;
                font-size: 40px;
                font-weight: bold;
                content: '“';
            }
        </style>
    </head>
    <body>
        <h2>Welcome to Coding Ninjas</h2>
        <p>
            At Coding Ninjas, our mission is to continuously
            innovate the best ways to train the next generation
            of developers and to transform the way tech
            education is delivered.
        </p>
    </body>
</html>


Output:

Output

Explanation:

In this example, we have added an inverted comma before the content.

::after

The next element is "::after". This is similar to the previous one. The only difference is, in the last example, we added the content at the start, but here we will add the content at the end. You can use the "content" property to define the additional content. 

<!DOCTYPE html>
    <head>
        <style>
            p::after {
                color: red;
                font-size: 40px;
                font-weight: bold;
                content: '”';
            }
        </style>
    </head>
    <body>
        <h2>Welcome to Coding Ninjas</h2>
        <p>
            At Coding Ninjas, our mission is to continuously
            innovate the best ways to train the next generation
            of developers and to transform the way tech
            education is delivered.
        </p>
    </body>
</html>


Output:

Output

Explanation:

In this example, we have added an inverted comma at the end of the content.

::marker

'::marker' pseudo-element in CSS is used to select the marker box of a list item that contains a number or a bullet. It works on a pseudo-element set or any element to display list items such as the <summary> and <li> elements.

<!DOCTYPE html>
    <head>
        <style>
            ul {
                width: 40px;
            }

            ul li::marker {
                color: red;

                font-size: 30px;
            }

            ol {
                width: 40px;
            }

            ol li::marker {
                color: red;

                font-size: 22px;
            }
        </style>
    </head>

    <body>
        <h2>Welcome to Coding Ninjas</h2>
        <ul>
            <li>CSS</li>
            <li>Java</li>
            <li>C++</li>
        </ul>
        <ol>
            <li>CSS</li>
            <li>Java</li>
            <li>C++</li>
        </ol>
    </body>
</html>


Output:

Output

Explanation:

As we all know, the default colour or bullets in a bullet list or numbered list is black in colour, but using marker pseudo-element, we can style bullets as per requirement.

::selection

'::selection' CSS Pseudo-element can be used to apply the style to the part of a document that has been selected by the user either by dragging the mouse or clicking across the text.

<!DOCTYPE html>
    <head>
        <style>
            p::selection {
                color: red;
                background-color: rgb(174, 243, 174);
                font-size: 30px;
            }

            ::selection {
                color: rgb(13, 83, 13);
                background-color: rgb(245, 222, 176);
                font-size: 30px;
            }
        </style>
    </head>
    <body>
        <h2>Welcome to Coding Ninjas</h2>
        <p>
            At Coding Ninjas, our mission is to continuously innovate the best ways to
            train the next generation of developers and to transform the way tech
            education is delivered.
        </p>
        <span>
            Coding Ninjas was founded in 2016 to bridge the knowledge gap between
            colleges and industry.
        </span>
    </body>
</html>


Output:

Output

Explanation:

Here, the text in the first paragraph changes to red when we select the text by dragging the mouse with a green background. As the other lines are not in <p>, you can notice yellow background and green text on selection.

Frequently Asked Questions

What is a pseudo-element?

A pseudo-element in CSS is a keyword added to a selector that helps us style some parts of the selected elements.

What is the use of ::before pseudo-element?

The ::before pseudo-element is used to add content before the paragraphs.

Why are we using a double colon instead of the single colon in syntax?

We use the double colon in to differentiate between pseudo-element and pseudo-classes.

What is the core difference between HTML and CSS?

HTML is used to make static web pages, and CSS is used for the presentation of that static webpage. 

Why do we use CSS?

CSS is a style sheet that is used to make the HTML page more attractive and user-friendly.

Conclusion

This article discusses the topic of CSS Pseudo-elements in detail. We have seen the definition of pseudo-elements. Along with this, we saw many types of pseudo-elements with code, output and explanation.

We hope this blog has helped you enhance your knowledge of CSS Pseudo-elements. If you want to learn more, then check out our articles.


And many more on our platform Coding Ninjas Studio.

Refer to our Guided Path to upskill yourself in DSACompetitive ProgrammingJavaScriptSystem Design, and many more! If you want to test your competency in coding, you may check out the mock test series and participate in the contests hosted on Coding Ninjas Studio!

But suppose you have just started your learning process and are looking for questions from tech giants like Amazon, Microsoft, Uber, etc. In that case, you must look at the problemsinterview experiences, and interview bundles for placement preparations.

However, you may consider our paid courses to give your career an edge over others!

Happy Learning!

Live masterclass