使文本背景高度大小增加动画

Question

我应该如何在CSS中动画文本(与写作模式设置为vertical-rl)背景，以增加其高度，当你悬停在它?像这样:https://youtu.be/A_ZS3aE_8Bw谢谢!

Answer 1

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