CSS before after Selectors | ::before, ::after

Content
Counter
Before
After

Before and After Pseudo Selectors

CSS ::before and ::after are Pseudo Elements under Pseudo Selectors which allow us to insert content into html, without write in html code. The content is visible is web browser, but not in source code. Actually ::before and ::after selectors insert content in DOM (inspect element). content property is compulsory in both :before and :after.

We can also write :before or :after in CSS2. Both works on all modern browsers, but for IE8, use :before and :after only.

css before after — CSS Before and After Pseudo Selectors

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