Tutorial 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

CONTENT © 2017 STRIKECODED TEAM™