Chakra-UI

I♥️Components

Pseudo Properties

|

Chakra Docs

|

⦾ Pseudo-elements in CSS are used to style specific parts of an element. For example, ::before and ::after are pseudo-elements that you can use to add content before or after an element's content. Chakra UI does not directly support pseudo-elements in the way that one might expect from pure CSS. However, you can still add pseudo-elements using the @emotion/react library, which Chakra UI is built on.

Pseudo-elements in CSS are used to style specific parts of an element. They can be used to add special effects to some selectors. Some commonly used pseudo-elements are ::before, ::after, ::first-letter, ::first-line, ::selection, ::backdrop, and ::marker.

The sx property in Chakra UI provides a powerful way to extend the use of CSS within your components. It allows you to apply custom CSS styles directly to a Chakra UI component using an inline syntax, without the need to write separate CSS files or define additional classes.

The sx property in Chakra UI becomes particularly useful when working with pseudo props. With the sx property, you can easily define styles for these pseudo props inline, providing a convenient and concise way to handle state-based styling within your components.

To import the Box component used below:

Examples

::before and ::after: These pseudo-elements can be used to add decorative elements or extra content to your component. In this example, the ::before pseudo-element is used to add a star before the content of the Box. We use position: "absolcontent star relative to the Box. We also use the content property to include the star character.

Starred content

::first-letter: This pseudo-element can be used to style the first letter of your component. In the following example, the ::first-letter pseudo-element is used to style the first letter of the text inside the Box first letter is made larger and colored deeppink.

The first letter of this sentence is styled.

::first-line: This pseudo-element can be used to style the first line of your component. In the following example, the ::first-line pseudo-element is used to style the first line of the text inside the Box. The first line is made bold and colored cyan.

The first line of this content is bold and cyan.
This is the second line, which is just normal.
This is the third line, also normal.

::selection: This pseudo-element can be used to style the selected text inside your component. In the following example, the ::selection pseudo-element is used to style the selected text inside the Box. The selected text is given acyan background.

Try selecting this text.

::placeholder can be used to style placeholder text of an input field. This can be used with Chakra UI's Input component. In the following example, the ::placeholder pseudo-element is used to style the placeholder text of the input field. The placeholder text color is changed to blue and the font style is set to italic. This is a useful feature that allows you to customize the appearance of the placeholder text, which can help to achieve a more integrated and visually pleasing user interface.

Did you know?

Creative Idea No. 1

Creating a Tooltip: you can create a simple tooltip using the ::after pseudo-element! In the following example, the ::after pseudo-element is used to create a tooltip. The tooltip text is stored in a data-tooltip attribute, which is accessed with the attr() function in the content property. The tooltip is initially hidden with opacity: "0", and made visible on hover with opacity: "1".
Hover over me

Code

Creative Idea No. 2

The ::checked pseudo-class in CSS is used to select an element that is in a checked state, typically used with form input elements like checkboxes and radio buttons. It represents the state when the user has interacted with the input element and selected it. When an input element with a ::checked, you can apply specific styles to customize its appearance. The following example, uses Chakra UI's Checkbox and CheckboxGroup components with the colorScheme prop to customize the checkbox color when it is checked. Chakra UI automatically applies appropriate styling to the checkboxes, including the ::checked pseudo-class, which allows you to define custom styles for the checked state of the checkboxes.

My Favorite Food:

Code

Creative Idea No. 3

Creating a Progress Bar: you can use the ::beforepseudo-element to create a progress bar. In this example, the::before pseudo-element is used to create a green bar inside the gray box, simulating a progress bar at 50%. To update the progress, you could dynamically change the width value of the ::before pseudo-element.

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.