How should I animate text (with writing-mode set to vertical-rl) background in CSS to increase its height when you hover over it? Something like this: https://youtu.be/A_ZS3aE_8Bw
Thanks!
>Solution :
#text {
--width: 2rem;
font-size: var(--width);
writing-mode: vertical-rl;
position: relative;
}
#text::before {
content: "";
position: absolute;
width: var(--width);
height: 0;
background-color: red;
z-index: -1;
transition: all 0.3s ease-in-out;
}
#text:hover::before {
height: 10rem;
} <div id="text">hello world!</div>