In every website, we use menu and other things with ordered/unordered list. For displaying nested or next level, We need to place the arrow to indicate next level. We use it mostly by using JavaScript/jQuery. But Nowadays we can add arrow in anchor tag using css3.
Assume our HTML structure is as follows:
1 2 3 4 5 6 7 8 9 10 | <ul class="menu"> <li><a href="#">Section A</a> <ul><li> <a href="#">Section A.1 </a> </li></ul> </li> <li>Section B</li> <li>Section C</li> </ul> |
If you want to add an arrow to the right edge of these elements:
1 2 3 4 5 6 7 8 9 10 11 | .menu li a:after{ height:0; width: 0; top: 0; left: 100%; position:absolute; content: ' '; border-left: solid 5px green; border-top: solid 9px transparent; border-bottom: solid 9px transparent; } |
And then increasing the left margin of li elements to account for the additional space these take up. You can play with the length of the triangle by increasing the pixel size of the border-left property, but be sure to increase the margin of the li accordingly to add arrow in anchor tag.