CSS Solid

☰

CSS Pseudo-Elements

CSS pseudo-element applies CSS styles to part of the HTML elements.

Syntax:

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

Example: 

p::before
{
      content:url("Tasks_OK.png");
}

h1::first-letter
{
    color: #ff0000;
}

Note:) CSS 2.1 onwards, all Pseudo-Elements have “::” (double colon). Before CSS 2.1, Pseudo-Elements have “:” (single colon) only.

  • Example:
  • p::first-line {color:blue;} -> CSS 2.1 onwards
  • p:first-line {color:blue;} -> Before CSS 2.1

 

Following table shows different Pseudo elements and its details.

Pseudo-Elements Description Example
Inserts content beginning of the targeted element content. 
div::before {
    <p> Important Message </p>
    }
Inserts content end of the targeted element content. 
div::after {<p> end </p>}
Selects first line of the targeted block level element 
div::first-line {color: blue;}
Selects first letter of the targeted block level element. 
div::first-letter {color: red;}

Example:

a) Set header (H1) element first character to different color.

b) Set image to beginning of the every P element. 


<!DOCTYPE HTML>
<html>
<head>
    <title> CSS Pseudo Element</title>
     <style>
              p::before
              {
                  content:url("/images/Tasks_OK.png");
              }
              h1::first-letter
              {
                   color: #ff0000;
              }
     </style>
</head>
<body>
    <h1>Zap Food and Gas</h1>
    <h2>138 First Street, CA 94539</h2>
    <hr />
    <h3>Our Mission:-</h3>
    <p>The mission of Zap Food and Gas is to offer great food and competitive gas price.</p>
    <h3>Our Commitment:-</h3>
    <p>Our commitment to serving you as our customer is at the heart of everything we do.
    It is our purpose to serve you as our customer with the highest-quality
    foodservice products and other services.</p>

</body>
</html>

Result: