Skip to content
Related Articles

Related Articles

Improve Article

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

  • Last Updated : 18 Apr, 2021

In this article, we will learn how content property is used with the :after selector in CSS. The :after selector is used to inserting 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:

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:

My Personal Notes arrow_drop_up
Recommended Articles
Page :