CSS pseudo-elements are used to add special effects to some selectors.
Syntax
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 a special style to the first line of a text.
The ::first-line pseudo-element can only be applied to block-level
elements.
Example
Format the first line of the text in p
elements:
p::first-line
{
color: #ff0000;
font-variant: small-caps;
}
Try it yourself »
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 a special style to the first
letter of a text.
The ::first-letter pseudo-element can only be applied to
block-level elements.
Example
Format the first letter of the text in p elements:
p::first-letter
{
color: #ff0000;
font-size: xx-large;
}
Try it yourself »
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
Pseudo-elements and CSS Classes
Pseudo-elements can be combined with CSS classes:
CSS:
p.article::first-letter {color:#ff0000;}
HTML:
<p class="article">A paragraph in an article</p>
The example above will display the first letter of all paragraphs with class="article", in red.
Multiple Pseudo-elements
Several pseudo-elements can also be combined.
In the following example, the first letter of a paragraph will be red, in
an xx-large font size. The rest of the first line will be blue, and in
small-caps. The rest of the paragraph will be the default font size and color:
Example
p::first-letter
{
color: #ff0000;
font-size: xx-large;
}
p::first-line
{
color: #0000ff;
font-variant: small-caps;
}
Try it yourself »
CSS - The ::before Pseudo-element
The ::before pseudo-element can be used to insert some content before the content of an element.
The following example inserts an image before each <h1> element:
CSS - The ::after Pseudo-element
The ::after pseudo-element can be used to insert some content after the content of an element.
The following example inserts an image after each <h1> element:
All CSS Pseudo Classes/Elements
| Selector |
Example |
Example description |
| :link |
a:link |
Selects all unvisited links |
| :visited |
a:visited |
Selects all visited links |
| :active |
a:active |
Selects the active link |
| :hover |
a:hover |
Selects links on mouse over |
| :focus |
input:focus |
Selects the input element which has focus |
| ::first-letter |
p::first-letter |
Selects the first letter of every <p> element |
| ::first-line |
p::first-line |
Selects the first line of every <p> element |
| :first-child |
p:first-child |
Selects every <p> elements that is the first child of its parent |
| ::before |
p::before |
Insert content before every <p> element |
| ::after |
p::after |
Insert content after every <p> element |
| :lang(language) |
p:lang(it) |
Selects every <p> element with a lang attribute value starting
with "it" | | | | | | | | |
oke pertama gw berterima kasih untuk w3school karena nyediain materi yang berguna banget untuk belajar web oke disini gw mau jelasin soal pseudo element before after . jadi singkat aja gini untuk pseudo elemetn after itu berguna untuk nyisipin apa aja yang lu mau cuman dengan lu kasih tanda after pada saat pendeklarasian di CSS contohnya bisa diliat diatas , jadi intinya sebelum id atau class nya yang mau lu pake element yang udah lu tentuin itu bakalan keluar , praktis banet bukan ? .
