CSS - Pseudo Elements

Previous
Quiz
Next

CSS pseudo-elements are used to style specified parts of an element. While browsing a webpage, you might have noticed that the first letter of some paragraphs is larger than rest of letters. This type of styling for a specific part of elements is done using pseudo-elements in CSS. In this tutorial we will explain all the pseudo-elements and their functioning.

Table of Contents


 

What is Pseudo-Element?

A pseudo-element in CSS, is used to style a specific part of an element that are not the part of the DOM (Document Object Model) and do not exist in the HTML markup. For Example first letter of a paragraph, placeholder text inside input element or selected part in a document.

  • Pseudo-elements are denoted by a double colon (::) notation.
  • Only one pseudo-element can be used in a selector.
  • A pseudo-element in a selector must appear after all the other components. For example, p::last-line:hover is invalid.
  • Pseudo-elements can be used to add decorative styles, create special effects, and modify the appearance of certain parts of an element, that has a state already applied to it. For example, p:hover::last-line is a valid statement and selects the last line of the paragraph when the paragraph is hovered

Syntax

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

The single colon syntax is supported by the browsers for the four original pseudo-elements, i.e., ::before, ::after, ::first-line, and ::first-letter.

Content Insertion Pseudo-Elements

In CSS, pseudo-elements ::before and ::after are used to insert text contents or images before and after any element.

Example

This example shows how to insert text and images at start and end of a paragraph using CSS. 

<!DOCTYPE html>
<html>

<head>
    <style>
        p:before {
            content: "NOTE:";
            font-weight: bold;
        }
        p:after {
            content: url(/css/images/smiley.png);
        }       
    </style>
</head>

<body>
    <p>
        We inserted intro at start and emoji at end.
    </p>
</body>
</html>

CSS Backdrop Pseudo-Element

In CSS the ::backdrop pseudo-element is used to style the backdrop of an element that is in a modal context, such as the backdrop behind a <dialog> element when it is shown.

Example

Following example demonstrates use of ::backdrop pseudo-element.

<!DOCTYPE html>
<html>

<head>
    <style>
        body{
            height: 200px;
        }
        dialog {
            padding: 20px;
            border: 2px solid black;
            border-radius: 10px;
        }
        dialog::backdrop {
            /* Semi-transparent black */
            background-color: rgba(0, 0, 0, 0.5); 
        }
    </style>
</head>

<body>
    <h3> Backdrop Example </h3>

    <dialog id="myDialog">
        <p> This is a dialog with a styled backdrop. </p>
        <button id="closeButton"> Close </button>
    </dialog>

    <button id="openButton">Open Dialog</button>

    <script>
        const dialog = document.getElementById('myDialog');
        const openButton = document.getElementById('openButton');
        const closeButton = document.getElementById('closeButton');

        openButton.addEventListener('click', () => {
            dialog.showModal();
        });

        closeButton.addEventListener('click', () => {
            dialog.close();
        });
    </script>
</body>
</html>

CSS Cue Pseudo-Element

In CSS, the pseudo-element ::cue is used with Web Video Text Tracks to style specific parts of text tracks, such as subtitles or captions, for media elements like <video> and <audio>.

Example

Following example demonstrates use of ::cue pseudo-element:

<!DOCTYPE html>
<html>
<head>
<style>
    video {
        width: 100%;
    }

    video::cue {
        font-size: 1rem;
        color: peachpuff;
    }
</style>
</head>
<body>
    <video controls src="/css/foo.mp4">
        <track default kind="captions" 
               srclang="en" src="/css/cue-sample.vtt" />
    </video>    
</body>
</html>

CSS First-Letter Pseudo-Element

In CSS, the ::first-letter pseudo-element is used to target the first letter of text content of any elements like div, paragraph, span etc

Example

Following example demonstrates use of ::first-letter pseudo-element:

<!DOCTYPE html>
<html>

<head>
    <style>
        p::first-letter { 
            text-transform: uppercase;
            font-size: 2em;
            color: darkred;
            font-style: italic;
        }
    </style>
</head>

<body>
    <p>
        this is a paragraph with first letter in lowercase, 
        we used ::first-letter pseudo-element to capitalize
        first-letter of paragraph with a larger font size 
        and a different color. 
    </p>
</body>

</html>

CSS First-Line Pseudo-Element

In CSS, the ::first-line pseudo-element is used to target the first line of text content of any elements like div, paragraph, span etc

Example

Following example demonstrates use of ::first-line pseudo-element:

<!DOCTYPE html>
<html>

<head>
    <style>
        p::first-line { 
            background-color: #f0f0f0;
            color: darkred;
            font-style: italic;
        }
    </style>
</head>

<body>
    <p>
        This is a normal paragraph with no stylings, we used 
        ::first-line pseudo-element to only style first-line of 
        paragraph by adding a background color, font-style and 
        text color
    </p>
</body>

</html>

CSS File-Selector-Button Pseudo-Element

In CSS, the ::file-selector-button pseudo-element is used to style the button of a file input element (<input type="file">) in modern browsers.

Example

Following example demonstrates use of ::file-selector-button pseudo-element:

<!DOCTYPE html>
<html> 

<head>
    <style>
        body {
            display: block;
            height: 100px;
        }

        input::file-selector-button {
            background-image:url(/css/images/border.png);
            background-size: 200%;
            border: 2px solid black;
            border-radius: 8px;
            font-weight: 600;
            color: rgb(6, 1, 9);
            padding: 15px;
            transition: all 0.25s;
        }
    </style>
</head>

<body>
    <h2> Select a file </h2>
    <input type="file">
</body>

</html>

CSS Marker Pseudo-Element

In CSS, the ::marker pseudo-element is used to style the marker of ordered list and unordered list.

Example

Following example demonstrates use of ::marker pseudo-element:

<!DOCTYPE html>
<html> 

<head>
    <style>
        ol li::marker {
            color: rgb(11, 38, 241);
            font-weight: bold;
        }
        ul li::marker {
            content: url('/css/images/smiley.png')
        }
    </style>
</head>

<body>
    <h2>Numbered list</h2>
    <ol>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ol>

    <h2>Bulleted list</h2>
    <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ul>
</body>

</html>

CSS Placeholder Pseudo-Element

In CSS, the ::placeholder pseudo-element is used to style the default text inside text input element (<input type="text">).

Example

Following example demonstrates use of ::placeholder pseudo-element:

<!DOCTYPE html>
<html> 
<head>
    <style>
        .form {
            border: 2px solid black;
            background: lightgray;
            padding: 25px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        input{
            padding: 10px;
            background-color: cornsilk;
        }

        input::placeholder { 
            color: grey; 
            font-style: italic;
            font-size: 20px;
        } 
    </style>
</head>

<body>
    <div class="form">
        <h2> Your Details:</h2>

        <input type="text" placeholder="First Name">
        <input type="text" placeholder="Last Name">
        <input type="text" placeholder="Address">
        <input type="text" placeholder="Phone">
    </div>
</body>

</html>

CSS Selection Pseudo-Element

In CSS, the ::selection pseudo-element is used to style the user selected text inside any elements like div, paragraph, span etc

Example

Following example demonstrates use of ::selection pseudo-element:

<!DOCTYPE html>
<html> 

<head>
    <style>
        .highlight::selection { 
            color: yellow;
            background: brown;
        } 
    </style>
</head>

<body>
    <p class="highlight">
        Select Me!!! to see the effect.
    </p>
    <p> No style applied to me. </p>
</body>
</html>

Multiple Pseudo-elements

We can also add multiple pseudo elements to a selector, Check out the example.

Example

Following example demonstrates usage of multiple pseudo-elements (::first-line and ::first-letter).

<!DOCTYPE html>
<html>
<head>
    <style>
        p::first-line { 
            text-decoration: underline;
        }
        
        p::first-letter { 
            text-transform: uppercase;
            font-size: 2em;
            color: red;
        }
    </style>
</head>
<body>
    <p>
        the first line of this paragraph will be underlined and 
        first letter is uppercase, 2em and red in color, as the
        pseudo-element ::first-line & ::first-letter is applied 
        on p. The other lines are not underlined.
    </p>
</body>
</html>

All CSS Pseudo-Elements

The following table shows all pseudo-elements in CSS:

Pseudo-element Description Example
::after Adds a pseudo-element that is the last child of the selected element.
::backdrop Used to style the backdrop of an element like dialog box.
::before Adds a pseudo-element that is the first child of the selected element.
::cue Used to style the captions and cues in media with video text tracks.
::first-letter Applies styles to the first letter of the first line of a block level element.
::first-line Applies styles to the first line of a block level element.
::file-selector-button Represents the button of an <input> of type="file".
::marker Selects the marker box of a list item.
::part() Represents an element within a shadow tree that has a matching part attribute.
::placeholder Represents a placeholder text in an <input> or <textarea> element.
::selection Applies styles to the selected part of the document (selected by clicking and dragging the mouse across text).
::slotted() Represents an element that has been placed into a slot inside an HTML template.
::grammar-error Used to style text that has been identified as grammatically incorrect by the browsers built-in grammar checking tools.
::spelling-error Used to style text that has been identified as incorrect spelling by the browsers built-in spelling checking tools.
Print Page
Previous
Next
Advertisements