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

Question

I want to add a caret symbol (down arrow or V) next to a menu item which has sub menu items. I know that it can be achieved using bootstrap. But, I can't update my custom css with bootstrap css as it would become messy.

I'm happy to integrate only a part of bootstrap if that is going to work.

Please suggest me a solution asap.

Answer 1

You can try be using pure CSS to achieve a triangle:

Markup:

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

Style:

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

    border-top: 10px solid black;
}

As result, you have a solid down arrow that you can use. If you want to go beyond, you can override this property with another similar triangle over it and make an exactly caret in a "V" format:

Markup:

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

Style:

.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;
}

This way you can get the exact form of a caret:

You can apply it to another element by making the triangle display: inline-table to align to the same line.

Now, it goes to you implement it on links!

Answer 2

If you are looking for easy symbol intergrations, I would suggest font-awesome if you want to avoid bootstrap.

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