html - 将带有 css 的下拉箭头添加到列表中的计数器集编号

Question

我有一个 OL 列表

<ol id="checkout-progress-state" class="checkout-progress">
<li class="active first" title="Select Addresses">
<span>Select Addresses</span>
<span class="notch"></span>
</li>
<li title="Shipping Information">
<span>Shipping Information</span>
</li>
</ol>

我已将以下 css 添加到之前的状态以创建我可以设置样式的数字

ol{counter-reset: progress-counter;font-size: 20px;}
ol li {border-top: 0 none white;position: relative;overflow: visible;display:inline-block; list-style-type: none;margin-right: 15px;} 
.checkout-progress li:before {
content: counter(progress-counter);
    counter-increment: progress-counter;
    }
    .checkout-progress li:before {border: 1px solid; border-radius: 12px;padding: 0 8px;margin-right: 10px;}
        .checkout-progress li.active:before {border: 1px solid #E96200; border-radius: 4px;padding: 0 6px;color: white; background-color: #E96200;}
 .notch {
    position: absolute;
    left: -10px;
    bottom: 0;
    border-top: 10px solid red;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    border-bottom: 0;
    _border-right-color: pink;
    _border-left-color: pink;
    _filter: chroma(color=pink);
}

正如您从这个 fiddle (http://jsfiddle.net/euABv/) 中看到的那样，箭头位于左侧。我希望它低于橙色框编号。有没有办法用计数器重置号码来做到这一点？

这会创建我想要的数字样式。但 我想在数字框(事件状态)的底部添加一个缺口。

我向 li 添加了槽口信息并尝试定位它，但它不会显示在框的底部。

Answer 1

你可以试试这个。

只需在外部类中添加position:relative - li.active first

li.active first{
   position:relative;
}

那么，即使你复制了很多相同的元素，箭头也不会改变位置。
fiddle