fbpx
April 6, 2020
css pseudo elements
CSS

CSS PSEUDO ELEMENTS | Add Special Effect Using Pseudo Element

In this tutorial we will be discussing about CSS Pseudo elements and how developers can use them to add special effects on web pages. In our previous tutorial we discussed about CSS pseudo classes and how we use this classes to add special effect to elements such as links. If you haven’t gone through the tutorial you can do so using the link below

Read previous tutorial on: CSS PSEUDO CLASSES | Learn How to Add Special Effect To Selectors

CSS PSEUDO ELEMENTS

Like the CSS pseudo classes, we can use the pseudo elements to add special effect to element majorly text. You might have come across web pages with the initial text on the page body having a larger font size compared to the rest or the first line of a sentence in the page body been underlined and other lines aren’t underlined. Such effects can be carried out using CSS pseudo elements. We are going to be highlighting different effects you can add to text on web pages using examples.

Below is the list containing the most commonly used pseudo-elements

s/n Pseudo-element Description
1 :before Use to add some content before an element
2 :after Use to add some content after an element
3 :first-letter Use to add effect to the first letter in an element
4 :first-line Use to add effect to the first line in an element

The syntax for using pseudo element is shown below

selector:pseudo-element{property:value}

When used with a class

selector.class:pseudo-element{property:value}

before pseudo element

The example below used to illustrate how to insert an element such as bullet before another element such as paragraph

<!DOCTYPE html>
<html lang="en">
<head>
   <style type="text/css">
     p:before {
        content: url(link-to-gif);
     }
   </style>

   <title>ILLUSTRATION OF :BEFORE PSEUDO ELEMENT PROPERTY</title>
</head>
<body>
  <p>This paragraph will come after a bullet </p>
  <p>This paragraph will come after a bullet </p>
  <p>This paragraph will come after a bullet </p>
  <p>This paragraph will come after a bullet </p>
  
</body>
</html>

:after pseudo element

:after pseudo element is used to add an element after another element. The illustration below shows how to add an element such as bullet after another element such as paragraph

ILLUSTRATION OF :AFTER PSEUDO ELEMENT PROPERTY

This paragraph will come before a bullet

This paragraph will come before a bullet

This paragraph will come before a bullet

This paragraph will come before a bullet

:first-letter pseudo element

The below example is used to illustrate how the :first-letter CSS pseudo elements can be used to control the first letter in an element

<!DOCTYPE html>
<html lang="en">
<head>
   <style >
     p:first-letter { font-size: 9em;
       
     }
   </style>

   <title>ILLUSTRATION OF :FIRST-LETTER PSEUDO ELEMENT PROPERTY</title>
</head>
<body>
  <p>This paragraph will start with a large font size </p>
  
</body>
</html>

RESULT

ILLUSTRATION OF :FIRST-LETTER PSEUDO ELEMENT PROPERTY

This paragraph will start with a large font size

:first-line pseudo element

The first-line pseudo element is used to add effect to the first line of an element. The below example shows how to underline the first line of an element using the first-line CSS pseudo elements.

<!DOCTYPE html>
<html lang="en">
<head>
   <style >
     p.line_underline:first-line { text-decoration: underline;
       
     }
   </style>

   <title>ILLUSTRATION OF :FIRST-LINE PSEUDO ELEMENT PROPERTY</title>
</head>
<body>
  <p class="line_underline">This is the first line which will be underlined <br>
   this section wont be underlined based on the structured rules
  </p>
  
</body>
</html>

RESULT

ILLUSTRATION OF :FIRST-LETTER PSEUDO ELEMENT PROPERTY

This is the first line which will be underlined
this section wont be underlined based on the structured rules

we can also use a similar method to underline the first letter of the first line. Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
   <style >
     p.line_underline:first-letter{ text-decoration: underline;
       
     }
   </style>

   <title>ILLUSTRATION OF :FIRST-LETTER UNDERLINING USING  PSEUDO ELEMENT PROPERTY</title>
</head>
<body>
  <p class="line_underline">This is the first line in which the first letter will be underlined <br>
   this section wont be underlined based on the structured rules
  </p>
  
</body>
</html>

RESULT

first line underline css pseudo elements

CONCLUSION

CSS pseudo elements helps developers setup special effect for elements. This is a very important property when constructing web pages. A good knowledge of this will help you structure a good use of pseudo elements. Lets move on to the next topic on CSS @ RULES

Leave a Reply

Your email address will not be published. Required fields are marked *