IntroDuction to Css
Pseudo-elements:
CSS pseudo-elements are used to add special effects to some selectors. The syntax is as follows:
The syntax of pseudo-elements:
selector:pseudo-element {property: value}
CSS classes can also be used with pseudo-elements:
selector.class:pseudo-element {property: value}
The :first-line Pseudo-element
The "first-line" pseudo-element is used to add special styles to the first line of the text in a selector:
p:first-line {color:#0000ff;font-variant:small-caps}
Note: The browser will dictate where the first line ends – depending on wrapping.
Note: The "first-line" pseudo-element can only be used with block-level elements.
Note: The following properties apply to the "first-line" pseudo-element:
- font properties
- color properties
- background properties
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
The :first-letter Pseudo-element
The "first-letter" pseudo-element is used to add special style to the first letter of the text in a selector:
p:first-letter {color:#ff0000;font-size:xx-large}
Note: The "first-letter" pseudo-element can only be used with block-level elements.
Note: The following properties apply to the "first-letter" pseudo- element:
- font properties
- color properties
- background properties
- margin properties
- padding properties
- border properties
- text-decoration
- vertical-align (only if 'float' is 'none')
- text-transform
- line-height
- float
- clear