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?
CodePudding user response:
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