Pseudo-elements Flashcards
What is a pseudo-element?
A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s).
Syntax
selector::pseudo-element {
property: value;
}
For example, ::first-line can be used to change the font of the first line of a paragraph.
/* The first line of every <p> element. */
p::first-line {
color: blue;
text-transform: uppercase;
}
Double colons (::) are used for pseudo-elements. This distinguishes pseudo-elements from pseudo-classes that use single colon (:) in their notation.
Restrictions
- You can use only one pseudo-element in a selector.
- The pseudo-element must appear after all the other components in the complex or compound selector in which it appears.
For example, you can select a paragraph’s first line using p::first-line but not the first-line’s children or a hovered first line. So both p::first-line > * and p::first-line:hover are invalid.
While it is not possible to select an element based on its state by using pseudo-elements, a pseudo-element can be used to select and style a part of an element that already has a state applied to it.
For example, p:hover::first-line selects the first line (pseudo-element) of a paragraph when the paragraph itself is being hovered (pseudo-class).
“Pseudo-elements - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved March 11, 2024.
::after pseudo-element
In CSS, ::after creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
Note: The pseudo-elements generated by ::before and ::after are contained by the element’s formatting box, and thus don’t apply to replaced elements such as <img>, or to <br> elements.
Syntax
\::after {
content: /* value */;
/* properties */
}
If the content property is not specified, has an invalid value, or has normal or none as a value, then the ::after pseudo-element is not rendered. It behaves as if display: none is set.
Accessibility concerns
Using an ::after pseudo-element to add content is discouraged, as it is not reliably accessible to screen readers.
Examples:
.exciting-text::after {
content: " <- EXCITING!";
color: green;
}
.boring-text::after {
content: " <- BORING";
color: red;
}
”::after - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved March 11, 2024.
::before pseudo-element
In CSS, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
Note: The pseudo-elements generated by ::before and ::after are boxes generated as if they were immediate children of the element on which they are applied, or the “originating element,” and thus can not apply to replaced elements, such as <img>, whose content is outside the scope of the CSS formatting model.
Syntax
\::before {
content: /* value */;
/* properties */
}
If the content property is not specified, has an invalid value, or has normal or none as a value, then the ::before pseudo-element is not rendered. It behaves as if display: none is set.
Examples:
q::before {
content: "«";
color: blue;
}
q::after {
content: "»";
color: red;
}
Accessibility concerns
Using a ::before pseudo-element to add content is discouraged, as it is not reliably accessible to screen readers.
”::before - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved March 11, 2024.
::backdrop pseudo-element
The ::backdrop CSS pseudo-element is a box the size of the viewport, which is rendered immediately beneath any element being presented in the top layer.
Syntax
\::backdrop {
/* ... */
}
Description
Backdrops appear in the following instances:
- Elements which have been placed in fullscreen mode using the Fullscreen API
Element.requestFullscreen()method. -
<dialog>elements that have been shown in the top layer via aHTMLDialogElement.showModal()call. -
Popover elements that have been shown in the top layer via a
HTMLElement.showPopover()call.
When multiple elements have been placed into the top layer, each one has its own ::backdrop pseudo-element.
/* Backdrop is only displayed when dialog is opened with dialog.showModal() */
dialog::backdrop {
background: rgb(255 0 0 / 25%);
}
Elements are placed in a last-in/first out (LIFO) stack in the top layer. The ::backdrop pseudo-element makes it possible to obscure, style, or completely hide everything located below a top layer element.
::backdrop neither inherits from nor is inherited by any other elements. No restrictions are made on what properties apply to this pseudo-element.
Examples:
Styling the backdrop for fullscreen video
In this example, the backdrop style used when a video is shifted to fullscreen mode is configured to be a grey-blue color rather than the black it defaults to in most browsers.
video::backdrop {
background-color: #448;
}
”::backdrop - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved March 11, 2024.
::file-selector-button pseudo-element
The ::file-selector-button CSS pseudo-element represents the button of an <input> of type="file".
Syntax
selector::file-selector-button
Examples:
HTML
<form> <label for="fileUpload">Upload file</label> <input type="file" id="fileUpload" /> </form>
CSS
input[type="file"]::file-selector-button {
border: 2px solid #6c5ce7;
padding: 0.2em 0.4em;
border-radius: 0.2em;
background-color: #a29bfe;
transition: 1s;
}
input[type="file"]::file-selector-button:hover {
background-color: #81ecec;
border: 2px solid #00cec9;
}
”::file-selector-button - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved March 12, 2024.
::first-letter pseudo-element
The ::first-letter CSS pseudo-element applies styles to the first letter of the first line of a block container, but only when not preceded by other content (such as images or inline tables).
Only a small subset of CSS properties can be used with the ::first-letter pseudo-element please check this link to see the full list.
Syntax
\::first-letter {
/* ... */
}
”::first-letter - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved March 12, 2024.
::part() pseudo-element
The ::part CSS pseudo-element represents any element within a shadow tree that has a matching part attribute.
Syntax
\::part(<ident>+) {
/* ... */
}
Example:
custom-element::part(foo) {
/* Styles to apply to the `foo` part */
}
”::part() - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved March 13, 2024.
::placeholder pseudo-element
The ::placeholder CSS pseudo-element represents the placeholder text in an <input> or <textarea> element.
Syntax
\::placeholder {
/* ... */
}
Note: Placeholders are not a replacement for the <label> element. Without a label that has been programmatically associated with an input using a combination of the for and id attributes, assistive technology such as screen readers cannot parse <input> elements.
”::placeholder - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved March 13, 2024.
::selection pseudo-element
The ::selection CSS pseudo-element applies styles to the part of a document that has been highlighted by the user (such as clicking and dragging the mouse across text).
Allowable properties
Only certain CSS properties can be used with ::selection:
colorbackground-color-
text-decorationand its associated properties text-shadow-
-webkit-text-stroke-color,-webkit-text-fill-colorand-webkit-text-stroke-width
In particular, background-image is ignored.
Syntax
\::selection {
/* ... */
}
Examples:
/* Make selected text gold on a red background */
\::selection {
color: gold;
background-color: red;
}
/* Make selected text in a paragraph white on a blue background */
p::selection {
color: white;
background-color: blue;
}
”::selection - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved March 13, 2024.
