The selection of pseudo-element adsorption is very similar to that of the pseudo-class, such as selector: pseudo element {property: value ;}. There are four methods.
First letters and First lines
The first-letter pseudo element acts on the first letter of the element, and the first-line acts on the top line of the element. You can, for example, create a drop caps for a paragraph and bold the first line.
The code is as follows: |
Copy code |
P: first-letter { Font-size: 3em; Float: left; } P: first-line { Font-weight: bold; }
|
Before and after Before and
Before and after are used to contact the content attribute and do not use HTML to determine the content location of an element.
The value of the content attribute can be: open-quote, close-quote, no-open-quote, no-close-quote. close any string or use a url (imagename) image in the quotation mark.
The code is as follows: |
Copy code |
Blockquote: before { Content: open-quote; } Blockquote: after { Content: close-quote; } Li: before { Content: "POW :" } P: before { Content: url (images/jam.jpg) }
|
It sounds good. Unfortunately, most users cannot understand the effect of before or after, because IE does not support it.