Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Learn how to use CSS pseudo-elements while styling web page.

    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1
    • 0
    • 944
    Comment on it

    Hii,
     In this blog i am going to share a simple example in which i have used CSS pseudo-element using which we can insert any content, images or create any design before, or after any html tag.
    Syntax:


    selector:pseudo-element {property: value}

    There are many CSS pseudo-elements,Out of which the most commonly used pseudo-elements are

    :first-line, :first-letter, :before, :after.
     

    Common CSS

    div.main{background: rgba(109,0,25,1);
    background: -moz-linear-gradient(-45deg, rgba(109,0,25,1) 11%, rgba(109,0,25,0.98) 15%, rgba(216,208,239,0.75) 75%,
    rgba(233,231,248,0.71) 86%, rgba(235,233,249,0.71) 87%);
    background: -webkit-gradient(left top, right bottom, color-stop(11%, rgba(109,0,25,1)), color-stop(15%,
    rgba(109,0,25,0.98)), color-stop(75%, rgba(216,208,239,0.75)), color-stop(86%, rgba(233,231,248,0.71)), color-stop(87%,
    rgba(235,233,249,0.71)));
    background: -webkit-linear-gradient(-45deg, rgba(109,0,25,1) 11%, rgba(109,0,25,0.98) 15%, rgba(216,208,239,0.75) 75%,
    rgba(233,231,248,0.71) 86%, rgba(235,233,249,0.71) 87%);
    background: -o-linear-gradient(-45deg, rgba(109,0,25,1) 11%, rgba(109,0,25,0.98) 15%, rgba(216,208,239,0.75) 75%,
    rgba(233,231,248,0.71) 86%, rgba(235,233,249,0.71) 87%);
    background: -ms-linear-gradient(-45deg, rgba(109,0,25,1) 11%, rgba(109,0,25,0.98) 15%, rgba(216,208,239,0.75) 75%,
    rgba(233,231,248,0.71) 86%, rgba(235,233,249,0.71) 87%);
    background: linear-gradient(135deg, rgba(109,0,25,1) 11%, rgba(109,0,25,0.98) 15%, rgba(216,208,239,0.75) 75%,
    rgba(233,231,248,0.71) 86%, rgba(235,233,249,0.71) 87%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6d0019', endColorstr='#ebe9f9', GradientType=1 );
    max-width:800px;margin:0 auto;
    }

    1) CSS pseudo-element :first-line is used to add CSS to the first line of the relative html tag.
    Example:
    CSS:
     

    div.css_first_line{border-bottom:3px solid #000;}
    div.css_first_line p:first-line {text-decoration: underline;}
    div.css_first_line p.noline:first-line { text-decoration: none;font-size:20px;font-weight:bold;color:green; }


    HTML:
     

    <div class="css_first_line">
     <h1>CSS pseudo-element :first-line is used to add CSS to the first line of the relative html tag</h1>
       <p class="noline">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
      
       <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,</p>
     </div>


    2) CSS pseudo-element :first-letter is used to add CSS to the first letter of the relative html tag.
    Example:
    CSS:

    div.css_first_letter{border-bottom:3px solid #000;}
    div.css_first_letter p:first-letter { font-size: 5em; }
    div.css_first_letter p.normal:first-letter { font-size: 10px; }


    HTML:
     

    <div class="css_first_letter">
     <h1>CSS pseudo-element :first-letter is used to add CSS to the first letter of the relative html tag.</h1>
       <p class="normal">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
      
       <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,</p>
     </div>


    3)CSS pseudo-element :before is used to insert any content, images or create any design before the relative html tag.

    4) CSS pseudo-element :after is used to insert any content, images or create any design after the relative html tag.
    CSS:
     

    div.css_after_before p::after{width:10px;height:10px;border-radius:100%;border:1px solid green;background-color:green;display:inline-block;;content:"";}
    div.css_after_before p{max-width:800px;margin:0 auto;display:inline-block;}
    div.css_after_before p::before{width:10px;height:10px;border-radius:100%;border:1px solid green;background-color:green;display:inline-block;;content:"";}


    HTML:
     

    <div class="css_after_before">
     <h1>CSS pseudo-element :before and :after is used to insert any content, images or create any design before or after the relative html tag.</h1>
      
       <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,</p>
     </div>


     

    Learn how to use CSS pseudo-elements while styling web page.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: