How to show :before :after on mouse hover
Aug 18, 2022
I have following CSS:
.title:before,
.title:after {
display: none;
}
and following HTML:
<div class="title">
<div>
<a class="header active">EXAMPLE</a>
</div>
</div>
title:after and .title:before are lines under my EXAMPLE text. I want to change them to display: block; when you hover over the header text. I know you can do similair things with the onmouseover Event but I couldn’t figure out how to implement that to :after and :before
This wouldn’t work: onmouseover="document.getElementByClassName('.title:after').style.display = 'block';"
Add comment
Answers (1)
Add Answer
for that, you can add class in the “title” class div using this javascript
onmouseover="document.getElementByClassName('.title').classList.add('title-active');"
and then using this class name you can show the before and after element
.title.title-active:before,
.title.title-active:after {
display: block;
}
and remove the class name when you hover out.
I hope this help.
