CSS Pseudo Elements

The CSS pseudo elements are used for adding some specialized effects to certain parts of a page.

First Line Pseudo Element

The “first line” pseudo element is specifically utilized for adding some kind of special effect or style to the first line of an element on a page. The only elements where the first line pseudo element can be used are those that are block –level types. There are many properties where this pseudo element can be applied. Here are some of those:

  • Font
  • Color
  • Background
  • Spacing between words
  • Spacing between letters
  • Text decoration
  • Line-height

There are other properties for which it can be used. Here is a good example of a first line pseudo element:

p:first-line

{

color:#ff0000;

font-variant:small-caps;

}

 

First Letter Pseudo Element

As you should have guessed, this pseudo element is utilized for adding specialized effects to the first letter of a line on a page. It is the same with the first line pseudo element in that it can only be used for elements that are block-level. It can be used for many of the same properties where the first line pseudo element can be used except for some additional ones like margin, padding, border, text, float and clear. Here is an example of a code for this pseudo element:

 

p:first-letter

{

color:#ff0000;

font-size:xx-large;

}

 

Multiple Pseudo Elements

Pseudo elements can actually be put together and combined. That means you can have a special effect for the first line of the text and another effect for the first letter on the text. Here is a sample code of multiple pseudo elements:

p:first-letter

{

color:#ff0000;

font-size:xx-large;

}

p:first-line

{

color:green;

font-variant:small-caps;

}

 

In this code the first letter on the text would be colored red. The rest of the first line would be colored green and would be of the same size as the rest of the text. As you can see, there were two pseudo elements that were combined here which affected the first line of the text element and also changed the first letter in it.

Before Pseudo Element

There is another pseudo element which can be used. This is the before pseudo element which can be utilized for inserting something before the actual element. Here is a sample code for this sort of element:

h1:before

{

content:url(book.gif);

}

In this example a book image can be placed before each element.

After Pseudo Element

Of course, if there is a before pseudo element, then there must be an after pseudo element. This is used for placing a different content exactly right after the content of the main element. Here is an example code for this kind of pseudo element:

h1:after

{

content:url(book.gif);

}

 

In this example a book image would be placed after the content of the main element.

These are just some of the basic things that you should learn about CSS pseudo elements. While knowledge about them and their use are not so basic, they can come in handy at some point.