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

  1. before and after selectors are not supported in I.E 7 and below.
  2. 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

  1. String within quotes
  2. attribute using attr()
  3. url() for image
  4. counter(count)

Content can be any string within double quotes, hexadecimal code, attribute and url. See example

Content value string

Paragraph


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

<p>Paragraph</p>

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

Paragraph

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

  • 11
  • 12
  • 13
  • 14
  • 15

<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

:after or ::after can be used to clearfix element before closing.

  • 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>
             

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

CSS3 Selectors