在下拉菜单中添加一个简单的向下箭头图像。

Question

我有一个网站，其中某些菜单标题是下拉式的（css）

我想在能够下拉的特定菜单标题上添加一个小的向下箭头。 有人可以给我一些如何做的建议吗？

- Josh Naylor

Answer 1

直接使用这个字符：http://www.fileformat.info/info/unicode/char/25bc/index.htm

▼  - ▼

- Jure C.

---

对于向上的箭头：使用▴ https://www.fileformat.info/info/unicode/char/25b4/index.htm - Skillz

Answer 2

a:after{
    content: '';
    border: 4px solid transparent;
    border-top: 4px solid white;
    margin-left: 2px;
    margin-bottom: 3px;
    display: inline-block;
    vertical-align: bottom;
}

我认为这是最好的方法，因为您可以调整长度的边框并调整高度的'border-top'，从而实现完全自定义。

- Sprose

Answer 3

如果您正在使用Bootstrap，可以按照以下步骤操作：

<span class="caret"></span>

这将在放置span的位置插入一个小向下箭头。

- Max

Answer 4

如果您正在创建菜单，并希望箭头不会填充黑色，请尝试以下代码：(以便箭头不填充任何颜色)

∇ - ∇

- Shriram Panchal

---

有趣的是，nabla符号有一个命名实体。 - dakab

Answer 5

尝试以下代码以添加箭头，根据需要自定义箭头的高度、宽度和位置。

    li.has_child:after {  
        content: '';   
        position: absolute;   
        border: 7px solid transparent; 
        /* This will set the direction of the arrow.*/  
         border-top: 7px solid white; 
           top: 34px; 
        margin-left: 5px; 

  } 

- Avdhut