23 - CSS Pseudo Elements

Unlike pseudo classes, pseudo elements are used to apply styles to a certain part of the content.

Syntax

       Selector :: pseudo-element {

          Property: value;

       }

A double colon (: : )  separates the selector and the pseudo element here, whereas we use a single (:) for specifying pseudo classes.

Note: We can use a colon and a double colon interchangeably, but to distinguish the pseudo elements from pseudo classes W3C introduced double colon notation for pseudo elements from CSS3 onwards.

In this chapter, we will discuss the most commonly used pseudo elements. Here they are,

  • after
  • before
  • first-letter
  • first-line
  • selection

The after Pseudo Element

We use this pseudo element to insert content after a particular element. The content specified within the style information would be placed after the content of the specified element. We use content property of CSS for this.

For example:

<html>
   <head>
      <style>
         h1::after{
         Content: “I am really excited to get appended here!!! Thanks to the after Pseudo Element”;
         Color:magenta;
         }
      </style>
   </head>
   <body>
      <h1> I am a heading</h1>
   </body>
</html>

The output of the above program would be:

     

The before Pseudo Element

We use this pseudo element to insert content before a particular element. The content specified within the style information would be placed before the content of the specified element. We use content property of CSS for this.

For Instance,

<html>
   <head>
      <style>
         h3::before{
         Content: “I am really excited to get appended here!!! Thanks to the before Pseudo Element.”;
         Color:magenta;
         }
      </style>
   </head>
   <body>
      <h3> I am a heading</h3>
   </body>
</html>

The desired output is:

   

The first-letter Pseudo Element

This element is used to apply style (or highlight) the first letter of text of a selector. We can make our boring paragraphs look like newspaper article with this pseudo-element.

Have a look at the example below,

<html>
   <head>
      <style>
         p::first-letter {
         font-size:300%;
         }
      </style>
   </head>
   <body>
      <p>This paragraph's look is quite interesting because the first-letter pseudo element changed its look.</p>
   </body>
</html>

The output would be:

    

The first-line Pseudo element

It is same like first-letter pseudo element. The only difference is that the first line of the specified element would be matched for applying the formatting instead of the first-letter.

We can format the first line of a paragraph or all the paragraphs that are present on the web page using this pseudo class.

<html>
   <head>
      <style>
         p::first-line {
         color: #22AABB;
         font-style:oblique;
         }
      </style>
   </head>
   <body>
      <p>You can use the ::first-line pseudo-element to add a special effect to the first line of a text.You know my beauty conscious sibling paragraph will also get effected!!!</p>
      <p> I am also getting effected with this pseudo element. Damn! I don't know what to do now. I should ask the designer(web) to change my look  because I don't want to look like
           my sibling!!!</P>
   </body>
</html>

The output of the above program would be:

          

The Selection Pseudo element

This is one more interesting property, we can actually change the look of the selected portion using this selection pseudo element.

Let’s see an example:

<html>
   <head>
      <style>
         ::-moz-selection { /* Code for Firefox */
         color: red;
         background: yellow;
         }
         ::selection {
         color:magenta;
         text-shadow:cyan 0-15px;
         background:yellow;
         }
      </style>
   </head>
   <body>
      <h4> Select any portion of Text on this page and see the magic!</h4>
      <p> This is some paragraph</p>
   </body>
</html>

The output of the above program would be:

       

When you select any portion the output would change to:

       

Please note that we can use only few CSS properties on this selection pseudo element. Text-shadow, background-color, background and color are only supported.

And this element is not supported in IE8 and its earlier versions, hence a doctype is mandatory.

Fire fox supports an alternative ::moz-selection property.

This is all about Pseudo elements. In the next chapter we will learn more about CSS.

Like us on Facebook

Wideskills