Documentation
HomeForumHelpYouTube
Search
⌃K
Links

Pseudo Classes/Elements

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.
Pseudo Classes/Elements

Pseudo Classes

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.

Pseudo Elements

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.
Select
To access Pseudo Classes/Elements from the Header
  1. 1.
    Select a block
  2. 2.
    Navigate to Header
  3. 3.
    Find the Pseudo Classes/Elements dropdown
  4. 4.
    Select required state (hover, focus, active) or style (before, after)
To access Pseudo Classes/Elements from the Block Inspector
  1. 1.
    Select a block
  2. 2.
    Open the Block Inspector
  3. 3.
    Find the Pseudo Classes/Elements dropdown
  4. 4.
    Select required state (hover, focus, active) or style (before, after)
Remove
From the Header
  1. 1.
    Select a block
  2. 2.
    Navigate to the Header
  3. 3.
    Find the Pseudo Classes/Elements dropdown
  4. 4.
    Select normal
To access Pseudo Classes/Elements from the Block Inspector
  1. 1.
    Select a block
  2. 2.
    Open the Block Inspector
  3. 3.
    Find the Pseudo Classes/Elements dropdown
  4. 4.
    Select normal
Add New
Either:
  1. 1.
    Select a block
  2. 2.
    Open the Block Inspector
  3. 3.
    Find the Pseudo Classes/Elements dropdown
  4. 4.
    Click ➕ to open the Add Pseudo Classes/Elements modal
  5. 5.
    Input name
  6. 6.
    Click to Create
Or:
  1. 1.
    Select a block
  2. 2.
    Open the Block Inspector
  3. 3.
    Open the Design tab
  4. 4.
    Find the Pseudo Classes/Elements tab
  5. 5.
    Click ➕ to open the Add Pseudo Classes/Elements modal
  6. 6.
    Input name
  7. 7.
    Click to Create
Design - Previous
Transforms
Next - Design
Relative Styling
Last modified 9mo ago