Loading lesson path
Concept visual
Start at both ends
Formula
A CSS pseudo - element is used to style specific parts of an element.
For example, it can be used to:Style the first letter or line, of an element
Formula
The table below shows the different pseudo - elements in CSS:::after p::after div::after Inserts something after the content of the specified element ::backdrop dialog::backdrop Styles the viewbox behind a dialog box or popover element ::before p::before div::before Inserts something before the content of the specified element
Formula
::file - selector - button
::file - selector - button
Selects any button of type < input type ="file">
::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
::grammar - error
::grammar - errorStyles a text that the browser has flagged as grammatically incorrect ::highlight()
Formula
::highlight(custom - name)::marker ::marker
::placeholder input::placeholder textarea::placeholder
Formula
Styles the placeholder text of < input > or < textarea > elements::selection ::selection
Formula
::spelling - error
::spelling - errorStyles a text that the browser has flagged as incorrectly spelled
Formula
::view - transition
::view - transitionRepresents the root of the view transitions overlay, which contains all view transition on the page
Formula
::view - transition - group
::view - transition - groupFormula
::view - transition - image - pair
::view - transition - image - pair
Represents a container for a view transition's "old" and "new" view states - before and after the transition
::view - transition - new
::view - transition - newRepresents the "new" view state of a view transition
Formula
::view - transition - old
::view - transition - oldRepresents the "old" view state of a view transition