May 03, 2021 CSS
4. :first-letter pseudo-element
5. Pseudo-elements and CSS classes
8.. CSS - :before pseudo-element
CSS pseudo-elements are special effects used to add selectors.
CSS pseudo-elements control content and elements are no different, but they are only element-based abstractions and do not exist in the document, so they are called pseudo-elements.
The syntax of a pseudo-element:
selector:pseudo-element {property:value;}
CSS classes can also use pseudo-elements:
selector.class:pseudo-element {property:value;}
The "first-line" pseudo-element is used to style the first line of text.
In the following example, the browser formats the first line of text of the p-element based on the style in the "first-line" pseudo-element:
Note: The "first-line" pseudo-element can only be used for block-level elements.
Note: The following properties can be applied to the "first-line" pseudo-element:
The "first-letter" pseudo-element is used to style the initials of the text:
Note: The "first-letter" pseudo-element can only be used for block-level elements.
Note: The following properties can be applied to the "first-letter" pseudo-element:
Tip: For a description of first-letter pseudo-elements, you can refer to the CSS:first-letter pseudo-elements section of this site.
Pseudo-elements can be combined with CSS classes:
p.article:first-letter {color:#ff0000;}
<p class="article">A paragraph in an article</p>
The example above turns the first letter of all paragraphs with class article red.
You can use it in combination with multiple pseudo-elements.
In the following example, the first letter of the paragraph appears in red with a font size of xx-large. The rest of the text in the first line will be blue and will be displayed in small capital letters.
The rest of the text in the paragraph is displayed in the default font size and color:
The ":before" pseudo-element inserts new content before the content of the element.
The following example inserts a picture in front of each of the elements:
The ":after" pseudo-element inserts new content after the content of the element.
The following example inserts a picture after each of the elements:
| Selector | Example | Example description |
|---|---|---|
| :link | a:link | Select all unresoled links |
| :visited | a:visited | Select all the links you've visited |
| :active | a:active | Select the active link |
| :hover | a:hover | The status of the mouse on the link |
| :focus | input:focus | The element is selected to have focus after input |
| :first-letter | p:first-letter | Select the first letter of each element |
| :first-line | p:first-line | Select the first line of each element |
| :first-child | p:first-child | The selector matches the element of the first child element that belongs to any element |
| :before | p:before | Insert content before each element |
| :after | p:after | Insert the content after each element |
| :lang( language ) | p:lang(it) | Select a start value for the lang property of the element |