Pseudo-elements, as mentioned in Chapter 8, allow parts of the content of an element to be treated as an element, making it possible to style just part of an element or add objects, such as images, to an element. Table 14.14 lists, again, standard pseudoelements.
Table 14.15 lists the values supported by the content property mentioned in Table 14.14. With the exception of nonnal and none, most of the values can be specified together.
1. ::first-letter, ::first-line, ::before, ::after, “selection
Figure 14.39 shows various ways that the pseudo-elements are used to add styling to part of an element and Figure 14.40 shows the result.
In the example, the p.author::before{} rule says to place the value of the content property before the <p> element of class=“author”, give it red color, and make it bold. The p.author::after{} rule says to do a similar thing with the value of the content property but after the element. The p.cap::first-line{} rule makes the words of the <p> element of class=“cap” all-uppercase. The p.first::first-letter{} makes the first letter of the <p> element of class=“first” red and 150 of the default font-size (i.e., 16px),
making the size 24px. The p.first::selection{} rule says to make the selected text gold and its background red.
2. Using content Property Values
Figure 14.41 shows more about how the values of the content property are used and Figure 14.42 the result. The body{} rule resets the count of the counter named “section” to 0, which is the default. The h3::before{} rule increments the section counter by 1 and uses the content property to insert the string “Section,” the section counter, and “:” before the <h3> element. The ,intro{} rule says to use “^” and “^” as open and close quotation marks for the element of class “intro.” The .intro::before{} and .intro::after{} rules insert the quotation marks defined in the ,intro{} rule before and after the element of class “intro,” respectively. The a::before{} rule uses the content property to insert a favicon and the string “TEDCO” before the content of the <a> element, makes the text small, Arial, and brown. A favicon is a small icon (e.g., 16 □ 16 and 32 □ 32) associated with a website, typically displayed next to the URL. A favicon format (.ico) can be created from many image fonnats and there are free online generators. The a::after{} rule inserts after the content of the <a> element: “(,” followed by the value of the id attribute of the element, “That’s it folks!”, followed by “).”
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.