Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • CSS Pseudo-elements

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 641
    Comment on it

    CSS pseudo elements are used to style parts of an element without giving particular Id or class to them.

    Uses of pseudo elements:-

    1. Used to style or add effect to the first letter or first element from the list of elements.
    2. With the help of this content can be added before or after the targeted element.

     

    Syntax of Pseudo-element:-

    selector::pseudo-element {
        property:value;
    }

     

    Here are some pseudo elements:-

    • ::first-line- Used to add style to only the first line of the selected element.
    • ::first-letter- Used to add style to the first letter of the selected element.
    • ::before- Add content before the selected element.
    • ::after- Add content after the selected element.
    • ::placeholder- Used to style the placeholder of an input box.

     

    Below is the example of ::first-line and ::first-lettter:-

    <!DOCTYPE html>
    <html>
    <head>
      <title>Pseudo-element</title>
    </head>
    <style type="text/css">
    div{
      width: 500px;
    }
    p::first-letter {
        color: #990033; /*style to be added to the first letter of p tag*/
        font-size: 40px;
        font-weight: bold;
    }
    
    p::first-line {
        color: #004080; /*style to be added to the first line of p tag*/
        background-color: #ffcc99;
        text-decoration: underline;
        font-size: 18px;
    }
    </style>
    <body>
    <div>
      <p>CSS pseudo elements are used to style parts of an element without giving particular Id or class to them.</p>
    </div>
    </body>
    </html>

    Here is the link of above code:-

    https://jsfiddle.net/r98mw8s7/

     

    Below is the example of ::before and ::after:-

    <!DOCTYPE html>
    <html>
    <head>
      <title>Pseudo-elements</title>
    </head>
    <style type="text/css">
    h1::before {
        content: "///"; /*content to be added before the selected element*/
        color: red;
    }
     h3::after {
        content: "***"; /*content to be added after the element*/
        color: green;
    }
    </style>
    <body>
    <div>
    <h1>This is a heading</h1> <!-- before element will be applied to this -->
    <h3>The ::before pseudo-element inserts content before the content of an element.</h3> <!-- after element will be applied to this -->
    
    <h1>This is a heading</h1><!-- before element will be applied to this also -->
    <h3>IE8 supports the content property only if a !DOCTYPE is specified.</h3><!-- after element will be applied to this also -->
    </div>
    </body>
    </html>

    Here is the link of above code:-

    https://jsfiddle.net/dfowg0vb/

     

 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: