使用CSS在字母上方放置一个小箭头

Question

我正在尝试使用HTML和CSS在网页中呈现一些简单的向量符号。向量通常用一个右箭头覆盖在字母上来表示。例如，作为图像：vector 问题是，我可能会在几十个不同的字母或符号上使用这种符号表示，并且我不想每次需要时都停下来制作另一张图像。如果可能的话，我希望使用文本来表示这个符号。

在搜索过程中，我发现了一些HTML符号（→）可以生成一个漂亮的右箭头（→）。因此，我想设计一些CSS，对于某个特定的span类包含的字母，会插入该箭头并将其定位在span内容的上方。

例如：

<span class="vector">v</span>

“would render like the image linked above.”的意思是“将呈现为上面链接的图片。”

“这是否可能只用纯CSS实现？我需要求助JavaScript吗？”

“谢谢。”

- PreciousBodilyFluids

Answer 1

箭头是内容的一部分，属于HTML。如果您决定打印页面，应该能够删除JavaScript和CSS，并且文本仍然有意义。

您应该使用组合右箭头上方与向量字母一起表示完整的向量字形。

我建议使用以下标记：

<var class="vector">v<span>&#8407;</span></var>

为了更好地表示，您可以使用CSS轻松将符号移回字母上方：

var.vector {
  font-style : normal;
}
var.vector span {
  margin-left: -.55em;   /* shift the arrow back over the letter */
  vertical-align : .2em; /* tune the arrow vertical position */
}

这里是一个jsbin示例。

- Borgar

---

我正要打出类似这样的东西，但你不需要那么多的 CSS。箭头需要放在字母 之后：x⃗，而不是之前。 - mercator

好的发现。我已经用正确的顺序更新了答案。最初，我认为箭头字母应该有0宽度（因为对我来说，“非间距”就是这个意思）；我把它放在前面，因为我对字体和字母比数学符号更有经验。不过显然我两者都还不够熟练。 :-) - Borgar

Answer 2

你提出的具体建议需要使用JavaScript来实现，但如果你为箭头使用了背景图像，则可以使用CSS来完成。

类似于：

span.vector {
    background: url(arrow.png) no-repeat top;
}

- roryf

---

啊，我应该想到那个的。谢谢！ - PreciousBodilyFluids

Borgar提出了一个非常好的观点，箭头是内容的一部分，我会考虑使用他的解决方案。 - roryf