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

我正在想办法使用这个unicode字符▼ 取代此菜单中的小gif图形

我知道我需要使用类似于：

#nav a:hover:after {
    content: "▼";
    color: #fff;
    }

但它只是在每个菜单项后面内联显示unicode字符，如下所示

---

我不知道如何使unicode字符集中在每个菜单项上，就像我能够处理图形一样。这可能吗？谢谢

在文本本身之后添加形状如何

关于▼

然后在CSS中，使

可见性：隐藏

并在

时显示：使用
可见性悬停
：可见

如果您不确定，请阅读有关可见性的更多信息
在关于▼的文本后添加形状如何

然后在CSS中，使

可见性：隐藏

并在

时显示：使用
可见性悬停
：可见

如果不确定，请阅读有关可见性的更多信息
为unicode字符指定
位置：绝对值
，并调整顶部和左侧位置

试试这个：

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

为unicode字符指定
position:absolute
，并调整顶部和左侧位置

试试这个：

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

你可以这样做

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

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

请参见示例：

您可以执行以下操作：

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

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

请参见示例：

谢谢！我更喜欢Jerad的解决方案，因为它可以自动将unicode字符居中，但您的解决方案也可以。谢谢！我更喜欢Jerad的解决方案，因为它会自动将unicode字符居中，但您的解决方案也可以。这与原始问题无关。这与原始问题无关