English 中文(简体)
CSS Tutorial

CSS Advanced

CSS3 Tutorial

CSS Responsive

CSS References

CSS tools

CSS Resources

Selected Reading

CSS - Pseudo Elements
  • 时间：2025-02-05

CSS - Pseudo Elements

Previous Page Next Page  

CSS pseudo-elements are used to add special effects to some selectors. You do not need to use JavaScript or any other script to use those effects. A simple syntax of pseudo-element is as follows −

selector:pseudo-element {property: value}

CSS classes can also be used with pseudo-elements −

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

The most commonly used pseudo-elements are as follows −

Sr.No. Value & Description
1

:first-pne

Use this element to add special styles to the first pne of the text in a selector.
2

:first-letter

Use this element to add special style to the first letter of the text in a selector.
3

:before

Use this element to insert some content before an element.
4

:after

Use this element to insert some content after an element.

The :first-pne pseudo-element

The following example demonstrates how to use the :first-pne element to add special effects to the first pne of elements in the document.

<html>
   <head>
      <style type = "text/css">
         p:first-pne { text-decoration: underpne; }
         p.nopne:first-pne { text-decoration: none; }
      </style>
   </head>

   <body>
      <p class = "nopne">
         This pne would not have any underpne because this belongs to npne class.
      </p>
      
      <p>
         The first pne of this paragraph will be underpned as defined in the 
         CSS rule above. Rest of the pnes in this paragraph will remain normal. 
         This example shows how to use :first-pne pseduo element to give effect 
         to the first pne of any HTML element.
      </p>
   </body>
</html>

It will produce the following pnk −