Search code examples
csscss-transitionsopacitypseudo-element

::first-letter pseudo element with opacity property not working

Well I have links' first letters already showing up and when I hover, I want other letters show up with transition (animated somehow).

At first, I make invisible all letters, then with ::first-letter pseudo element, I make the first letter visible with visibility: visible. When I hover it, other letters show up but it is not animated and I want to add it with opacity.

I set opacity 0 all letters and in ::first-letter I make opacity 1, What I expect is, make transition work, however it is not.

.navbarlist li a {
  visibility: hidden;
  transition: all 0.5s ease;
  opacity: 0;
}
.navbarlist li a::first-letter {
  transition: all 0.5s ease;
  visibility: visible;
  opacity: 1;
}
.navbarlist li a:hover {
  visibility: visible;
  transition: all 0.5s ease;
  opacity: 1;
}

All letters are invisible with this piece of code and I wonder why it is not working. Any advice?

Solution

  • The ::first-letter pseudo-element can only be used for certain properties but opacity & visibility aren't one of them.

    You will have to split your text into multiple span tags to achieve your desired output