CSS ::before - Add Content before Specified Element

The CSS ::before pseudo-element is used when we need to add a content before the content of selected element. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p::before {content: ">>"; font-weight: bold; color: firebrick;}
   </style>
</head>
<body>

   <p>This para one.</p>
   <p>This is para two.</p>

</body>
</html>

Output

This para one.

This is para two.

Add an Image before the Content of an Element using CSS

To insert an image before the content of selected element, here is the syntax:

element::before {content: url(image_url);}

For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      ul li {list-style-type: none;}
      li::before {content: url(images/fingertoright.JPG); margin-right: 8px;}
   </style>
</head>
<body>

   <p>List of Some Famous Web Developing Languages:</p>
   <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
      <li>Django</li>
      <li>Bootstrap</li>
      <li>PHP</li>
   </ul>

</body>
</html>

Output

List of Some Famous Web Developing Languages:

HTML
CSS
JavaScript
Django
Bootstrap
PHP

CSS Online Test

« Previous Tutorial Next Tutorial »