Apply :hover on element:after and element:before using CSS

CSS is a powerful tool for adding special effects to web pages. In this article, we'll learn how to use the CSS :hover selector to add special effects to elements on our web pages. We'll learn how to apply :hover on elements:before and :after, and how to use CSS to create special effects when the user hovers over an element.

.box {
    position: relative;
}

.box:hover:before {
    content: "Before content";
}

.box:hover:after {
    content: "After content";
}