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;
}
: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;
}
: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';
}
: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';
}
