Less css, nested attributes, :hover::after

Question

Is it possible to do this with less?

a {
    &:after {
        background: red;
    }
    &:hover {
        &:after {
            background: blue;
        }
    }
}

I can't get the :after to change color when hovering over a?

... assuming the OP actually generated the pseudo-element with `content` in the first place, which is missing from the question. — BoltClock, May 28 '13 at 16:20
Bah, my misstake, I had missed an ";" in my class. Therefore it didn't work. — Philip, May 29 '13 at 18:40

score 56 · Accepted Answer · answered May 28 '13 at 16:08

The following works fine for me:

a {
    &:after {
        content:'a';
        background: red;
    }
    &:hover {
        &:after {
            background: blue;
        }
    }
}

My LESS-enabled editor, compiled that to:

a:after {
  content: 'a';
  background: red;
}
a:hover:after {
  background: blue;
}

Which does work.

score 0 · Answer 2 · answered Jul 16 '19 at 11:26

This is also work fine for me : -

 a{
    &:after{
        background: red;
        content: "Hover Text"
    }
    &:hover{
        &:after{
            background: yellow;
        }
    }
}

And My terminal Compile that to:-

a:after {
  background: red;
  content: "Hover Text";
}
a:hover:after {
  background: yellow;
}

score -6 · Answer 3 · answered Feb 03 '14 at 15:48

-6

a {

  &:after {

     background: red;

  }

  &:hover,
  &:after {

     background: blue;

  }

}

This is okay now :P

answered Feb 03 '14 at 15:48

miber

1

Less css, nested attributes, :hover::after

3 Answers3