Open In App

How content property is used with :after selector in CSS ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

In this article, we will learn how content property is used with the :after selector in CSS. The :after selector is used to insert something after any selected element. And the content property is used to specify the content that will be inserted. So we use the content property in ::after selector to put something after the selected element.

Approach: The content property is used to insert content after or before any selected element. So we use content in:after selector to insert something after the selected element. 

Syntax:

element::after{
    content : value;
    css-properties...
}

Example: In this example, we are using the above-explained approach.

HTML




<!DOCTYPE html>
<html>
<head>
    <style>
        p::after{
            content: "GeeksforGeeks";
            color: green;
            font-size: 30px;
            border-bottom: solid 5px green;
        }
    </style>
</head>
 
<body>
    <p style="font-size:30px;">
        Best website to learn coding:
    </p>
</body>
</html>


Output:


Last Updated : 30 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads