用css在字母上放置一个小箭头

Question

我正在尝试使用 html 和 css 在网页中呈现一些简单的矢量符号。向量简单地由字母上方的向右箭头表示。示例，作为图像：矢量

问题是我可能会在几十个不同的字母或符号上使用这种表示法，而且我不想在每次需要一个图像时都停下来制作另一个图像。如果可能的话，我想用文本来表示这一点。

在搜索时，我偶然发现了一些 HTML 符号 (→) 表示一个漂亮的向右箭头 (→)。所以，我希望能够做的是想出一些 css，对于由某个 span 类包围的字母，插入该箭头并将其定位在 span 的内容上。

例如：

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

会像上面链接的图像一样呈现。

这可以用纯css吗？我必须求助于javascript吗？

谢谢

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 示例。