When a user hovers over the content created by CSS, I want to change its style using the `content: ""` property.
.breadcrumb li{
display: inline;
}
.breadcrumb li.location+li.location::before {
content: ">";
color: green;
padding-right: 2.5px;
}
li.attribute a:hover {
color:blue;
}
li.attribute::after{
content: "x";
color: gray;
vertical-align: super;
font-weight: 300;
font-size: 15px;
}
I am trying to make the "x" turn red when hovered over. I attempted to use :
li.attribute:hover::after{
color: red;
}
Unfortunately, it is turning not only the "x" but also the word "Organic" red when hovered over. Here is the HTML code:
<ul class="breadcrumb">
<li class="location">
<a href="#">Shop</a>
</li>
<li class="location">
<a href="#">Groceries</a>
</li>
<li class="location">
<a href="#">Blueberries</a>
</li>
<li class="attribute">
<a href="#">Organic</a>
</li>
.breadcrumb li{
display: inline;
}
.breadcrumb li.location+li.location::before {
content: ">";
color: green;
padding-right: 2.5px;
}
li.attribute a:hover {
color:blue;
}
li.attribute::after{
content: "x";
color: gray;
vertical-align: super;
font-weight: 300;
font-size: 15px;
}
li.attribute:hover::after{
color: red;
}<ul class="breadcrumb">
<li class="location">
<a href="#">Shop</a>
</li>
<li class="location">
<a href="#">Groceries</a>
</li>
<li class="location">
<a href="#">Blueberries</a>
</li>
<li class="attribute">
<a href="#">Organic</a>
</li>