html - 如何创建 li 事件形状

Question

我正在尝试在菜单标题中创建一个形状，表明它已被选中(事件类)，但我无法调出该形状并将其对齐。

这是我试过的:

HTML

<li class="active"><a href="#">Market</a></li>

CSS

.active {
   z-index: -1; 
   position: absolute;
   border-bottom: 2px solid #b6ff00;
   border-left: 1px solid transparent;
   border-right: 1px solid transparent;
}

预期结果:

JSFIDDLE:http://jsfiddle.net/Q2Dra/

Answer 1

您在边界的正确轨道上。您只需要将它应用于伪元素而不是 li。

完整示例: http://jsfiddle.net/Q2Dra/4/

相关代码:

.active:after {
    content:'';
    border:10px solid transparent;
    border-bottom:10px solid #b6ff00;
    position:absolute;
    bottom:0;
    left:50%;
    margin-left:-10px;
}