Advanced CSS Pseudo Elements
Category: CSS, CSS3 Tutorial | 375 views | Add a Comment |
First letters and First lines
The first-letter pseudo element applies to the first letter of an element and first-line to the top line of an element. You could, for examples create drop caps and a bold first-line for paragraphs like this:
p:first-letter {
font-size: 3em;
float: left;
}
p:first-line {
font-weight: bold;
}
Before and after
The before and after pseudo elements are used in conjunction with the content property to place content either side of an element without touching the HTML.
The value of the content property can be open-quote, close-quote, no-open-quote, no-close-quote, any string enclosed in quotation marks or any image using url(imagename). Read more…
