Adding :hover to a content property

Question

I want to change the style of the content created by CSS using content: "" property when the user hovers over it.

.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;
}

SO I want the x to turn red when it's hovered over. I tried using :

li.attribute:hover::after{
  color: red;
}

But it's making it red when I hover over the word "Organic" itself as well as the content"x".

HTML:

<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>

i think it is impossible according to this answer:https://stackoverflow.com/a/5777334/9140740 — לבני מלכה, Dec 14 '20 at 10:27
Do you want to use `::after` only to insert the "x"? Or you can use some other method? — Praneet Dixit, Dec 14 '20 at 10:29
I am currently learning to create breadcrumb navigation and so I would rather use `::after` — Basel Samy, Dec 14 '20 at 11:18

score 0 · Accepted Answer · answered Dec 14 '20 at 10:33

0

If you don't mind editing the html, then you can insert a sup tag instead of ::after pseudo element and apply the css accordingly -

.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 sup{
  color: gray;
  font-weight: 300;
  font-size: 15px;
}
li.attribute sup:hover{
  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>
    <sup>x</sup>
  </li>

answered Dec 14 '20 at 10:33

Praneet Dixit

1,393
9
25

Thank you @praneet for the alternative, however, I am currently learning to create breadcrumb navigation and so I would rather use `::after` in CSS – Basel Samy Dec 14 '20 at 11:19
I am not saying that you replace everything. Keep your code and logic, but you can apply these changes just to the "x" so that you can achieve what you are looking for. – Praneet Dixit Dec 14 '20 at 12:21
Actually, the whole purpose of the question is to know if I can style the `:hover` of a `content: ""`. not to add the x itself. – Basel Samy Dec 15 '20 at 11:38
Adding a `:hover` state to a `::before` or `::after` pseudo elements is not possible. – Praneet Dixit Dec 15 '20 at 12:01

Adding :hover to a content property

1 Answers1