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

Question

我想在具有子菜单项的菜单项旁边添加插入符号（向下箭头或 V）。我知道可以使用 bootstrap 来实现。但是，我无法使用 bootstrap 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与同一条线对齐来将其应用到另一个元素。

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