CSS Pseudo Elements

In this article we are going to have a look at css pseudo elements, more to the point we will be looking at pseudo elements found in CSS2.1 and CSS3. I will be writing another blog which will focus on pseudo classes that are included with CSS at another time.

So what is a pseudo element? They are used to add special effects to a range of selectors. With these pseudo elements, it gives the web designer more flexibility in how they style various parts of their webpage, for example, if the developer wanted to style the first letter of a paragraph or style the first line of a paragraph, this can be accomplished easily with css pseudo elements, which we will show you how to do this with some examples below.

We will be focusing on the following pseudo elements in this article:

  • :first-letter
  • :first-line
  • :before
  • :after

:first-letter

The :first-letter pseudo-element allows you to define styles for the first letter of an element.
This example will change the first letter to green with a font size of 2em.

p:first-letter {
    font-size:2em;
    color:green;
}
Give it a Try!

:first-line

The :first-line pseudo-element allows you to define styles for the first line of an element.
This example will make our first line italic with a green font.

p:first-line {
    font-style:italic;
    color:green;
}
Give it a Try!

:before

The :before pseudo-element allows you to insert generated content before the element, this could be an image or text.
This example will place a heart at the beginning of each paragraph.

p:before {
    content:'2665';
}
Give it a Try!

:after

The :after pseudo-element allows you to insert generated content after the element, this could be an image or text.
This example will place a heart at the end of each paragraph.

p:after {
    content:' 2665';
}
Give it a Try!

One Response to CSS Pseudo Elements

  1. Slit says:

    Hi! One question: why pseudo element :focus doesn’t work on your simple example hide/show. I tried to use this element for making “close” and “open” effect [click/focus image gets big, click big image, image gets small] but it doesn’t work. Why? :-)

Leave a Reply

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