CSS3元素類低於文本

Question

我的代碼非常簡單，但我想將css3三角形移動到文本「click」的中間。有人可以幫我嗎？

**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

我不想添加任何額外的元素，到目前爲止，這是可以計算出來的唯一途徑。 在li上添加了text-indent的竅門！

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/

Answer 2

我不知道是否有定位邊框的方式，但這樣的事情應該做的伎倆。

li{list-style:none; } 

a { 
    display: block; 
    width: 40px;    
} 

.arrow{ 
    position: relative; 
    width: 0px; 
    height: 0px; 
    margin: 0 auto; 
    border-style: solid; 
    display:block; 
    border-width: 0px 5px 8px 5px; 
    border-color: #000 transparent; 
} 


<li><a href="#">click<span class="arrow"> </span></a></li> 

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