# 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
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. 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)
Remove
From the Header
1. Select a block
2. Navigate to the Header
3. Find the Pseudo Classes/Elements dropdown
4. Select normal
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
Add New
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
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.cwicly.com/design/pseudo-classes-elements.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.