CSS - Pseudo-element - ::before Property

Quiz

The ::before pseudo-element in CSS is used to add content before the selected element with the content property. It allows you to insert text, images, or decorative elements, without modifying the HTML structure. It is inline by default.

Syntax

selector::before {
   /* ... */
}

Use of ::before pseudo-element to add content is not advised, as it may not be accessible to the screen readers.

CSS ::before Example

Here is a simple example of usage of ::before pseudo-element:

<html>
<head>
<style>
   p {
      color: royalblue;
      font-size: 1.5em;
      border: 2px solid black;
      text-transform: lowercase;
   }
   p::before {
      content: url(images/logo.png) ;
      position: relative;
   }
</style>
</head>
<body>
   <div>
      <p>pseudo-element ::before</p>
   </div>
</body>
</html>

Here is another example, where the usage of ::before pseudo-element is shown:

<html>
<head>
<style>
   #flavor {
      display: block;
      font-size: 18px;
      color: black;
      width: 500px;
   }

   li {
      padding: 10px 16px;
      font-size: 16px;
      color: black;
      background-color: #fff;
      margin-top: 25px;
      width: 300px;
      transition: all 0.3s ease;
   }

   li::before {
      content: url(images/smiley.png);
   }
</style>
</head>
<body>
   <form>
      <ul id="flavor">
         Ice cream Flavors:
         <li> Cookie dough</li>
         <li> Pistachio</li>
         <li> Cookies & Cream</li>
         <li> Cotton Candy</li>
         <li> Lemon & Raspberry Sorbet</li>
      </ul>
   </form>
</body>
</html>

Print Page