How to write :hover and :visited condition for a:before?
I'm trying a:before:hover but it's not working
This question is related to
css
css-selectors
pseudo-element
pseudo-class
or you can set pointer-events:none to your a element and pointer-event:all to your a:before element, and then add hover CSS to a element
a{
pointer-events:none;
}
a:before{
pointer-events:all
}
a:hover:before{
background:blue;
}
Try to use .card-listing:hover::after hover and after using :: it wil work
Write a:hover::before instead of a::before:hover: example.
To change menu link's text on mouseover. (Different language text on hover) here is the
html:
<a align="center" href="#"><span>kannada</span></a>
css:
span {
font-size:12px;
}
a {
color:green;
}
a:hover span {
display:none;
}
a:hover:before {
color:red;
font-size:24px;
content:"?????";
}
BoltClock's answer is correct. The only thing I want to append is that if you want to only select the pseudo element, put in a span.
For example:
<li><span data-icon='u'></span> List Element </li>
instead of:
<li> data-icon='u' List Element</li>
This way you can simply say
ul [data-icon]:hover::before {color: #f7f7f7;}
which will only highlight the pseudo element, not the entire li element
You can also restrict your action to just one class using the right pointed bracket (">"), as I have done in this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span {
font-size:12px;
}
a {
color:green;
}
.test1>a:hover span {
display:none;
}
.test1>a:hover:before {
color:red;
content:"Apple";
}
</style>
</head>
<body>
<div class="test1">
<a href="#"><span>Google</span></a>
</div>
<div class="test2">
<a href="#"><span>Apple</span></a>
</div>
</body>
</html>
Note: The hover:before switch works only on the .test1 class
Source: Stackoverflow.com