css - 文本下方的 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;
}​

在线代码：http: //jsfiddle.net/8rRyf/

Answer 1

我不确定是否有办法定位边界，但这样的事情应该可以解决问题。

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/

Answer 2

我不想添加任何额外的元素，到目前为止，这是唯一可以解决的方法。添加text-indent在 li 中成功了！

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/