I attempted to move the letter 'h' down by 40px on its own, but the translation only seems to work if I relocate the entire word. I also experimented with positioning 'h' absolutely relative to the parent element, but then 'ello' loses its original position.
HTML
<div class="container">
<span class="word">
<span class="character first" style="transition-delay: 0s;">h</span>
<span class="character" style="transition-delay: 0.025s;">e</span>
<span class="character" style="transition-delay: 0.05s;">l</span>
<span class="character" style="transition-delay: 0.075s;">l</span>
<span class="character" style="transition-delay: 0.1s;">o</span>
</span>
</div>
CSS
.container {
display: flex;
justify-content: center;
align-items: center;
width:100vw;
height:100vh;
}
span {
font-size:60px;
}
.word {
border-style: solid;
border-color: coral;
display: inline-block;
}
.first {
transform: translateY(40px);
}