# 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.

{% hint style="danger" %}
New Pseudo Classes or Elements are specific to the block on which they are applied. 
{% endhint %}

{% hint style="danger" %}
Pseudo Classes/Elements can be accessed from both the Primary and Design tabs in the Block Inspector.
{% endhint %}

![Pseudo Classes/Elements](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FSyRQwkcPuX6fuipyY2ni%2Fpseudo-classes.png?alt=media\&token=0bc35123-4d93-457c-afa0-a368a7f6e16b)

## 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. 

<details>

<summary>Select</summary>

To access Pseudo Classes/Elements from the Header

1. Select a block
2. Navigate to Header
3. Find the Pseudo Classes/Elements dropdown
4. Select required state (hover, focus, active) or style (before, after)

To access Pseudo Classes/Elements from the Block Inspector

1. Select a block
2. Open the Block Inspector
3. Find the Pseudo Classes/Elements dropdown
4. Select required state (hover, focus, active) or style (before, after)

</details>

<details>

<summary>Remove</summary>

From the Header

1. Select a block
2. Navigate to the Header
3. Find the Pseudo Classes/Elements dropdown
4. Select normal&#x20;

To access Pseudo Classes/Elements from the Block Inspector

1. Select a block
2. Open the Block Inspector
3. Find the Pseudo Classes/Elements dropdown
4. Select normal&#x20;

</details>

<details>

<summary>Add New</summary>

Either:

1. Select a block
2. Open the Block Inspector
3. Find the Pseudo Classes/Elements dropdown
4. Click ➕ to open the Add Pseudo Classes/Elements modal
5. Input name
6. Click to Create

Or:

1. Select a block
2. Open the Block Inspector
3. Open the Design tab
4. Find the Pseudo Classes/Elements tab
5. Click ➕ to open the Add Pseudo Classes/Elements modal
6. Input name
7. Click to Create

</details>