This is the 24th day of my participation in the August More Text Challenge.
What is a pseudo-element?
CSS pseudo-elements are used to set the style of the specified part of an element.
For example, it can be used for:
- Sets the style of the first letter and first line of the element
- Inserts content before or after the content of an element
grammar
Syntax for pseudo-elements:
selector::pseudo-element {
property: value;
}
Copy the code
: : first – line pseudo elements
::first-line pseudo-elements are used to add special styles to the first line of text.
The following examples are all
Add style to the first line of the element:
The instance
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
Copy the code
Note :: :first-line pseudo-elements can only be applied to block-level elements. In the CSS World book ::first-letter pseudo-elements work only if: – First, the display value of the element must be block, inline-block, list-item, tablecell, or table-caption. All other display values are useless. These include display:table and display:flex – normally the characters that can be used directly as pseudo-elements are numbers, English letters, Chinese characters, $, some operators, and Spaces, which are very easy to ignore
The following attributes apply to ::first-line pseudo-elements:
- Font properties
- Color attribute
- Background properties
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
Note the double colon notation – ::first-line versus :first-line
In CSS3, the double colon replaces the single colon notation for pseudo-elements. This is the W3C’s attempt to distinguish pseudo-classes from pseudo-elements.
In BOTH CSS2 and CSS1, the single colon syntax is used for pseudo-classes and pseudo-elements.
For backward compatibility, CSS2 and CSS1 pseudo-elements accept a single colon syntax.
: : first – letter pseudo elements
The ::first-letter pseudo-element is used to add a special style to the first letter of text.
The following example sets all
The format of the first letter of the element text:
The instance
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
Copy the code
Note :: :first-letter pseudo-elements only apply to block-level elements.
The following attributes apply to ::first-letter pseudo-element:
- Font properties
- Color attribute
- Background properties
- Margin property
- Inside margin property
- Border attribute
- text-decoration
- Vertical-align (only if “float” is “none”)
- text-transform
- line-height
- float
- clear
Pseudo elements and CSS classes
Pseudo-elements can be used with CSS classes:
The instance
p.intro::first-letter {
color: #ff0000;
font-size: 200%;
}
Copy the code
The above example will display the first letter of the class=”intro” paragraph in red and larger font.
Multiple pseudo-elements
You can also combine several pseudo-elements.
In the following example, the first letter of the paragraph will be red and the font size will be XX-Large. The rest of the first line will be blue and will use small capital letters. The rest of the paragraph will be the default font size and color:
The instance
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
p::first-line {
color: #0000ff;
font-variant: small-caps;
}
Copy the code
Try it out for yourself
CSS – ::before pseudo-element
The ::before pseudo-element can be used to insert something before the element content.
The following examples are in each
Insert an image before the contents of the element:
The instance
h1::before {
content: url(smiley.gif);
}
Copy the code
CSS – ::after pseudo-element
::after pseudo-elements can be used to insert some content after the element content.
The following examples are in each
Insert an image after the contents of the element:
The instance
h1::after {
content: url(smiley.gif);
}
Copy the code
Try it out for yourself
CSS – :: Selection pseudo-elements
:: Selection Pseudo-elements match parts of the element selected by the user.
The following CSS properties can be applied to :: Selection:
- color
- background
- cursor
- outline
The following example makes the selected text appear red on a yellow background:
The instance
::selection {
color: red;
background: yellow;
}
Copy the code