html - 如何使一行文本中的一个词比其他词高一点或低一点？

Question

有没有办法让一行文字中的某个词比其他词高一点或低一点？

<p>what is this life if <span class="higher">full of care</span> we have <span class="lower">no time</span> to stand and stare</p>

我尝试添加“display: inline-flex;”并在这些跨度之后插入伪元素。不幸的是，它只是在 span 下添加了伪元素，并没有在 span 内移动文本。

.higher{
    display: inline-flex;
    flex-direction: column;
}
.higher:after{
    content: "";
    height: 5px;
    width: 10px;
}

但是请让我提出两个条件:

1) 我知道和标签(以及“vertical-align: sub;”和“vertical-align: sup;”样式)但它们不允许微调偏移量。

2) 如果能得到多行文本的解决方案那就太好了。

非常感谢!

Answer 1

感谢Kosh Very我找到了解决方案:

.higher{
    transform: translate(0, -5px);
}
.lower{
    transform: translate(0, 5px);
}