javascript - How do I add a caret (down wards) using CSS next to link (anchor tag)? - Stack Overflow

admin管理员组

文章数量:1293508

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 bee messy.

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

Please suggest me a solution asap.

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 bee messy.

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

Please suggest me a solution asap.

• javascript
• jquery
• html
• css
• twitter-bootstrap

Share Improve this question Follow asked Apr 24, 2015 at 1:06 KiranDKiranD 45133 gold badges77 silver badges2020 bronze badges 2

• show us what have you tried using relevant code – nicholaswmin Commented Apr 24, 2015 at 1:12
• @NicholasKyriakides, I'm not a css expert. I tried this.. .menu-parent a:after { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid #f00; }. It didn't work. – KiranD Commented Apr 24, 2015 at 1:18

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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!

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/

本文标签： javascriptHow do I add a caret (down wards) using CSS next to link (anchor tag)Stack Overflow