First Letter & First Line
CSS includes a number of pseudo things. The first type of pseudo thing we will discuss are “pseudo-elements”.
Pseudo-elements allow for the selection of content, as if it were a separate element, without having to mark it up as such in the HTML.
Two pseudo elements that are made available with CSS are “first letter” and “first line”. Respectively, these allow for the selection of the first letter or first line, in an element’s text. This selection can then be used to alter the appearance or display of just the first letter or line.
The selectors for first letter and line are:
selector::first-letter {}
selector::first-line {}
/*The word selector in the above is replaced with
the normal CSS selectors used to identify elements.*/
p::first-letter {color: green; font-size: 1.25em}
Example 1
In the following, the first letter and line of a div element are selected and altered.
Example 2
In the following example, the same technique of using the first letter selector is applied to create a large letter, like might occur in a children’s book.
Thereupon he himself locked up the room, and left her in it alone. So there sat the poor miller's daughter, and for the life of her could not tell what to do, she had no idea how straw could be spun into gold, and she grew more and more frightened, until at last she began to weep.
But all at once the door opened, and in came a little man, and said, "Good evening, mistress miller, why are you crying so?"
"Alas," answered the girl, "I have to spin straw into gold, and I do not know how to do it."
"What will you give me," said the manikin, "if I do it for you?"
{ TODO: }
Read page 289 of Chapter 12 in Duckett.