CSS ::before and ::after Pseudo-Elements

Content
Counter
Before
After

Before and After Pseudo Selectors

The CSS ::before and ::after pseudo-elements let you insert generated content into the document using CSS without changing the HTML markup. Generated content is added to the browser DOM (visible in DevTools) but not present in the original page source. The content property is required for both ::before and ::after.

You may also encounter the single-colon forms (:before, :after) for legacy CSS2 compatibility. Modern browsers support the double-colon syntax; use the single-colon syntax for older IE compatibility when necessary.

Examples of CSS ::before and ::after pseudo-elements — Examples: Using `::before` and `::after` to add icons, quotes and counters

before and after selectors are not supported in I.E 7 and below.
before and after selectors are valid for PAIR TAGS ONLY. They are not supported for unpaired elements, like img, input etc.

Content

content is the compulsory property of both before and after. Without content, before and after will not work.

Value of content property

String within quotes
attribute using attr()
url() for image
counter(count)

Content can be any string within double quotes, hexadecimal code, attribute and url. To use hexadecimal value, use backslash (\). See example

Content value string

Paragraph 1

Paragraph 2


<style>
    p:before{ content:"—"; color:red}
</style>

<p>Paragraph 1</p>
<p>Paragraph 2</p>

Content value string unicode

Do You Know?


    <style>
        div:before{ content:"\1f4a1";}
    </style>
    
    <div>Do You Know?</div>

Content value attribute

Paragraph


<style>
    p:before{ content:attr(title);}
</style>

<p title="→"> Paragraph</p>

Content value image

Paragraph


<style>
    p:before{ content:url(arrow.png);}
</style>

<p>Paragraph</p>

Content value counter

Paragraph


<style>
    div{ counter-reset:count;}
    p{counter-increment: count;  }
    p:before{ content:counter(count);}
</style>
<div>
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
</div>

::before

::before or :before is used to add some content before html element through css without affecting the markup. ::before was introduced in css 2.1 and is supported on Internet Explorer 8 and above. before content is treated as child of same element. :"before is inline.

For IE 8 and above, use :before.

CSS Before example


<style>
    .list li:before{ content:"Q No: " }    
</style>   

<ul class="list">		
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
</ul>

carat icon using before


    <style>
        button:before{
            content:"";
            display:inline-block;
            border-style:6px solid;
            border-color:white transparent transparent transparent;
        }
    </style>
    
    <button>Dropdown</button>

quotes using before

This is a Quote


    <style>
        p{
            text-align:center;
        }
        p:before{
            content:open-quote;
            font-family:serif;
        }
        p:after{
            content:close-quote;
            font-family:serif;
        }
    </style>
    
    <p>This is a Quote<p>

::after

::after or :after pseudo selector is used to add content after an html element, without any change in HTML Markup. ::after was also introduced in css 2.1 with before.:after is also inline.

For IE 8 and above, use :after.

CSS after example

Para 1
Para 2
Para 3
Para 4
Para 5


<style>
	.list li:after{ content:"." }    
</style>
   

    <ul class="list">	
        <li>Para 1</li>
        <li>Para 2</li>
        <li>Para 3</li>
        <li>Para 4</li>
        <li>Para 5</li>
    </ul>

Clear both using after

One of the best use of CSS After selector is to Clear both using after . :after or ::after can be used to clearfix element before closing. Use display block and clear both in after with content "". See example

Clear List using After

List 1
List 2
List 3
List 4
List 5


    <style>   
        ul{
            list-style:none;
        }
        ul li{
            float:left;
            margin-right:10px;
        }
        ul:after{
            content:"";
            clear:both;
            display:block;
        }   
    </style>
    
    <ul>
        <li>List 1<li>
        <li>List 2<li>
        <li>List 3<li>
        <li>List 4<li>
        <li>List 5<li>
        <!--After will clear here-->    
    </ul>

Clear Div using after

Col 1

Col 2

Col 3

Col 4


<style>   
        .row{
            border:solid 1px #333;
        }
        .row:after{
            content:"";
            clear:both;
            display:block;
        }
        .col{
            float:left;
            width:25%;
            padding: 10px;
        }  
    </style> 
    <div class="row">
        <div class="col"> Col 1 </div>
        <div class="col"> Col 2</div>
        <div class="col"> Col 3</div>
        <div class="col"> Col 4</div>
    </div>

To see more pseudo class and pseudo elements introduced in css3, click below

CSS3 Selectors

Frequently Asked Questions

Can I use ::before and ::after on any element?

They work on elements that have a start and end tag (container elements). They are not supported on void/unpaired elements such as <img> or <input> in the same way.

What is the difference between a pseudo-class and a pseudo-element?

A pseudo-class (e.g., :hover) selects an element in a particular state; a pseudo-element (e.g., ::before) represents a generated portion of the element's content created by CSS.