CSS Make text background height size increase animation-CodePudding

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!

CodePudding user response：

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