如何在链接（锚标记）旁边使用CSS添加插入符号（向下）？

Question

我想在具有子菜单项的菜单项旁边添加一个插入符号（向下箭头或V）。 我知道可以使用引导程序来实现。 但是，我无法使用引导CSS更新自定义CSS，因为它会变得凌乱。

如果能够正常工作，我很高兴只集成一部分引导程序。

请尽快给我建议解决方案。

Answer 1

您可以尝试使用纯CSS实现三角形：

标记：

<div class="triangle"></div>

样式：

.triangle {
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;

    border-top: 10px solid black;
}

如此一来，您将可以使用向下的实心箭头。 如果您想超越此范围，则可以在该属性上覆盖另一个相似的三角形，并以“ V”格式进行完全插入记号：

标记：

   <div class="triangle">
     <div class="over-triangle"></div>
   </div>

样式：

.triangle {
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid black;
}

.over-triangle {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid white;
    position: relative;
    top: -10px;
    left: -5px;
}

这样，您可以获得插入符的确切形式：

您可以通过display: inline-table三角形来将其应用于另一个元素display: inline-table以对齐同一行。

现在，您可以在链接上实现它！

Answer 2

如果您正在寻找简单的符号集成，那么如果您想避免引导程序，我建议使用真字体。

http://fortawesome.github.io/Font-Awesome/