Pseudo Classes/Elements
Last updated
Was this helpful?
Last updated
Was this helpful?
When you want to define a special state of an element or temporarily style a part of an element when a user interacts with it, you can use Pseudo Classes (hover, focus, active) and Pseudo Elements (before, after).
Pseudo Classes/Elements can be added to a block either directly in the Header or Block Inspector or in the Pseudo Classes/Elements tab in the Design tab of the Block Inspector.
New Pseudo Classes or Elements are specific to the block on which they are applied.
Pseudo Classes/Elements can be accessed from both the Primary and Design tabs in the Block Inspector.
The Pseudo Class property allows you to add a keyword to a selector that specifies the special state of the selected element(s). Each property corresponds to a very specific point in how a user will interact with an element on a page such as a link or a button or an input field. For example, you can use Hover to change the colour of a button when a user hovers over it.
Hover The Hover effect causes an area to change colour, show text or pop-up a box of related information when a user moves their mouse over a certain area of the screen.
Focus When an element is given focus, it is ready to be activated with a keyboard or any keyboard-like technology.
Active represents an element (such as a button) that is being activated by the user, for example when the user presses down the primary mouse button.
The Pseudo Element property allows you to add a keyword to a selector that allows you to style a specific part of the selected element(s).
Before is often used to insert some content before the content of an element.
After is often used to insert some content after the content of an element.
