在菜单中使用Unicode字符而不是图形

Question

我正试图找出一种方法来使用这个unicode字符▼代替这个菜单中的一个小gif图形......

我知道我需要使用类似的东西：

spar

但是这只是在每个菜单项之后显示内联的unicode字符......

我无法弄清楚如何使unicode字符居中于每个菜单项，就像我能够使用图形一样。这可能吗？谢谢！

Answer 1

你可以做点什么，

#nav a {
  position: relative;
  overflow: hidden;
}

#nav a:hover:before {
  content: "▼";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
}

参见示例：

https://jsfiddle.net/njqd7gnp/2/

Answer 2

将position:absolute提供给您的unicode角色并调整左上角和左上角。

试试这个：

#nav a{
    position:relative;
}
#nav a:hover::after {
    color: #fff;
    content: "▼";
    left: 50%;
    margin-left: -6px;
    position: absolute;
    top: -4px;
}

Answer 3

如何在文本本身后添加形状<li>about &#9660</li> 然后在CSS中，您创建visibility:hidden;并使用:hover

在visibility:visible;时显示

如果您不确定http://www.w3schools.com/cssref/pr_class_visibility.asp

，请详细了解可见度