Question

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

问题是我可能会在几十个不同的字母或符号上使用这种表示法，而且我不想在每次出现需要时停止所有内容并制作另一张图像。我希望尽可能使用文本来表示这一点。

在搜索时，我偶然发现了一些HTML符号（＆amp; rarr;），找到了一个很好的右箭头（→）。因此，我希望能够做到的是提出一些css，对于由某个span类包含的字母，插入该箭头并将其定位在跨度的内容上。

例如：

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

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

纯css有可能吗？我不得不诉诸javascript吗？

由于

Answer 1

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

您应该使用带有向量字母的COMBINING RIGHT ARROW ABOVE来表示完整的向量字形。

我提出以下标记：

<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 */
}

这是a jsbin example。

Answer 2

你提出的具体建议必须使用Javascript完成，但是如果使用箭头的背景图像，你可以使用CSS。

类似的东西：

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

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

2 个答案: