We now have a youtube channel. Subscribe!

Pseudo elements


Hello guys! morning to you all, wishing you all a happy Wednesday. Alright in my previous tutorial post i talked about css pseudo-classes. Am going to move on to the next topic which is Css Pseudo element.

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}

Below are the following most commonly used with pseudo-elements available in Cascading Style sheets (Css):

You can also read our tutorial post on: Html Javascript


Value

Description

:first-line

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

:first-letter

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

:before

Use this element to insert some content before an element.

:after

Use this element to insert some content after an element.

The :first-line Pseudo-element

Following is the example which shows how to use :first-line element to add special effect to the first line of elements in the document.

<html>
     <head>
          <style   type="text/css">
                 p:first-line  {text-decoration: underline;}
                 p.noline:first-line  {text-decoration: none;}
          </style>
     </head>

     <body>
          <p class= "noline">
                 This line will not have any underline because this belongs to noline class.
          </p>

          <p>
                 The first line of this paragraph will be underlined as defined in the css rule above. Rest of the lines in this paragraph will remain normal.   
          </p>
     </body>
</html>

You can also read our tutorial post on: Css Pseudo classes

The :first-letter Pseudo-element

Following below is the example which shows how to use :first-letter element to add specail effect to the first letter of elements in the document.

<html>
     <head>
          <style  type="text/css">
                 p:first-letter  {font-size: 4em; text-color:blue;}
                 p.normal:first-letter  {font-size: 10px;}
          </style>
     </head>

     <body>
          <p  class="normal">
                 The first letter of this paragraph will be normal and will have font size of 10px.   
          </p>

          <p>
                 The letter of this paragraph will be 4em big and will have a blue  
                 color as defined in the css rule above. The rest letters in the 
                 paragraph will remain normal.
          </p>
     </body>
</html>

You can also read our tutorial post on: Css Dimensions

The :before Pseudo-element

Following below is the example which shows how to use the :before element to add some content before any element.

<html>
     <head>
          <style  type="text/css">
                 p:before  {
                       content: url(/image/bullet.jpeg)
                 }
          </style>
     </head>

     <body>
          <p>This line will be preceded by a bullet.</p>
          <p>This line will be preceded by a bullet.</p>
     </body>
</html>

You can also read our tutorial post on: Css Syntax

The :after Pseudo-elemant

Following below is the example which shows how to use the :after element to add some content after any element.

<html>
     <head>
          <style  type="text/css">
                 p:after  {
                       content: url(/image/bullet.jpeg) 
                 }
          </style>
     </head>

     <body>
          <p>This line will be succeeded by a bullet. </p>
          <p>This line will be succeeded by a bullet.</p>
     </body>
</html>

Alright thats it for this tutorial on CSS Pseudo-element, always feel free to ask your questions.

Follow us on all our social media platforms and share this post to friends. Finally you can appreciate the knowledge shared here by commenting below. 

See you in my next tutorial, thanks and bye for now.

Post a Comment

Hello dear readers! Please kindly try your best to make sure your comments comply with our comment policy guidelines. You can visit our comment policy page to view these guidelines which are clearly stated. Thank you.
© 2023 ‧ WebDesignTutorialz. All rights reserved. Developed by Jago Desain