Question

My code is very simple, but I’d like to move the css3 triangle to the middle of the text “click”. could someone please help me?

**HTML**
<li><a href="#" class="arrow">click</a></li>​


**CSS**
li{list-style:none; }
.arrow{
    width: 0px;
    height: 20px;
    border-style: solid;
    display:block;
    border-width: 0 5px 8px 5px;
    border-color: #000 transparent;
}​

ONLINE CODE: http://jsfiddle.net/8rRyf/

Answer 1

I dont want to add any extra element, so far this is the only way could figure it out.
Added text-indent in li did the trick!

li{list-style:none; margin-left:20px; text-indent: -8px;}


.arrow{
    width: 0px;
    height: 20px;
    border-style: solid;
    display:block;
    border-width: 0 5px 8px 5px;
    border-color: #000 transparent;
}​

http://jsfiddle.net/8rRyf/24/