Creating Effects with Decorative Pseudo-Elements
Pseudo-elements ::before and ::after are special selectors that allow us to insert content before or after an element's content. We use them to add decorative elements, such as icons or borders, to an element's content without modifying the actual HTML content.
selector::before {
/* some properties */
}
selector::after {
/* some properties */
}
::beforeadds the content before the element content;::afteradds the content after the element content.
Let's consider the following example, where our task is to add some decoration for the hover effect on the links:
index.html
index.css
Thanks for your feedback!
Ask AI
Ask AI
Ask anything or try one of the suggested questions to begin our chat
Can you show me the CSS code for adding the after content on hover?
How can I use ::before to add content before the link?
What are some other decorative uses for ::before and ::after?
Awesome!
Completion rate improved to 2.56Creating Effects with Decorative Pseudo-Elements
Swipe to show menu
Pseudo-elements ::before and ::after are special selectors that allow us to insert content before or after an element's content. We use them to add decorative elements, such as icons or borders, to an element's content without modifying the actual HTML content.
selector::before {
/* some properties */
}
selector::after {
/* some properties */
}
::beforeadds the content before the element content;::afteradds the content after the element content.
Let's consider the following example, where our task is to add some decoration for the hover effect on the links:
index.html
index.css
Thanks for your feedback!
