codescracker
css

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:

CSS Online Test


« Previous Tutorial Next Tutorial »



© Copyright 2021. All Rights Reserved.

CodesCracker