Chapter 18: CSS Pseudo Elements
The Syntax
The syntax for pseudo elements is a bit different than that of regular
CSS, but it's real close. If you have already read
chapter 11 then you are
slightly ahead of the game.
selector:pseudo-element {property: value}
As you can see the only difference is that you place the pseudo element
after the selector, and divide the 2 with a (:) colon.
Or you can assign a class to a pseudo element as follows
selector.p:pseudo-element {property: value}
Using the above code would style all paragraphs within the declared
selector with the pseudo element.
The elements:
first-line
first-letter
First Line
The first-line pseudo element styles the first line of text in a block level
element.
p{font-size: small;}
p:first-line {font-size: medium; color: #ff0000;}
As you can see in the above example paragraphs are set to be a small
font size, but the p:first-line is set to be a medium size and a red color.
The result is that the first line of all paragraphs will be red in color and a
bit larger than the rest of the paragraph.
Though lets say you only want to style a certain paragraph of text with
the first-line element. Thats where declaring a class to the pseudo
element comes into play.
first -line with class
p.special:first-line {font-size: medium; color: #ff0000;}
I have declared a class of special within my css file.
First-Line Example
This is a special sentence I wrote to demonstrate the use and look of the first-line pseudo element. As you can see the first line of this
paragraph is styled differently than the rest of the text within it. All of this was done by simply adding class="special" to the opening <p> tag
for this paragraph.
<p class="special">the content</p>
Where the first-line ends depends on the width of the browser window or
containing element, you can resize this page and see that it adjusts as
you change the size of the browser window.
The following properties can be assigned to the first-line pseudo
element:
background
clear
color
font
letter-spacing
line-height
text-decoration
text-transform
vertical-align
word-spacing
First Letter
The first-letter pseudo element styles the first letter of text in a block
level element.
p{font-size: small;}
p:first-letter {font-size: medium; color: #ff0000;}
As you can see in the above example paragraphs are set to be a small
font size, but the p:first-letter is set to be a medium size and a red
color. The result is that the first letter of all paragraphs will be red in
color and a bit larger than the rest of the paragraph.
Though lets say you only want to style a certain paragraph of text with
the first-letter element. Thats where declaring a class to the pseudo
element comes into play.
first -letter with class
p.special_letter:first-letter {font-size: x-large; font-weight:
bold; color: #ff0000;}
I have declared a class of special_letter within my css file.
First-Letter Example
This is a special sentence I wrote to demonstrate the use and look of
the first-letter pseudo element. As you can see the first letter of this
paragraph is styled differently than the rest of the characters within it.
All of this was done by simply adding class="special_letter" to the
opening <p> tag for this paragraph.
<p class="special_letter">the content</p>
The following properties can be assigned to the first-letter pseudo
element:
background
border
clear
color
float
font
line-height
margin
padding
text-decoration
text-transform
word-spacing
