Html 仅使用CSS的导航分隔符

我正在尝试使用CSS创建分隔符，以保持其语义，并从内容中删除样式

但是，我希望在每个

项下面都有一个边框底部。但是，

：before

选择器扩展了

元素的宽度，并创建了不一致的边框

我尝试了来自的答案，它使用了与我类似的方法，并给出了相同的问题

下面是我的导航（基于选项卡）

---

这里有一个小把戏：

尽管您使用的是

：在虚拟生成内容的
pseudo之前，它仍然被计算在元素中，因此您的元素会扩展

为了解决这个问题，首先对
li
使用
marginleft
将它们隔开，然后使用
position:absolute用于伪内容，然后使用
左：-8px以正确定位

确保使用
position:relative用于
li
元素



另一种方法是将
li
的文本封装在
span
元素中，而不是将
border-bottom
指定给
span
元素，而不是将其用于
li

使用span


像这样改变你的DOM

<ul>
    <li><span>One</span> </li>
    <li><span>Two</span></li>
    <li><span>Three</span></li>
    <li><span>Four</span></li>
</ul>

应与IE8及更高版本配合使用。
有点像外星人先生的做法，但是稍微短一点，用一个边框而不是用管子

.innerNav li {
    display: inline-block;
    border-bottom: 3px solid red;
    margin-right: 1em;
    position: relative;
}

.innerNav li + li:before {
    border-left: 1px solid blue;
    content:"";
    display: block;
    height: 100%;
    position: absolute;
    left: -0.5em;
    top: 0;
}

问题可能是你的
之间的空白，更多信息。
li:not（：：first child）{border left:1px solid#000；}是的，搞定了，我采用了第二种方法。谢谢：）谢谢你的回答：）我更喜欢艾琳先生的第二种方法，因为我不需要做
修改就能实现它。
.innerNav li {
    display: inline-block;
    border-bottom: 3px solid red;
    margin-left: 10px;
    position: relative;
}

.innerNav li:before {
    content: "|";
    position: absolute;
    left: -8px;
    color: blue;
    border: 0;
    padding-right: 10px;
}

.innerNav li:first-child:before {
    display: none;
}

<ul>
    <li><span>One</span> </li>
    <li><span>Two</span></li>
    <li><span>Three</span></li>
    <li><span>Four</span></li>
</ul>

.innerNav li {
    display: inline-block;
}

.innerNav li span {
    border-bottom: 3px solid red;
}

.innerNav li:before {
    content: "|";
    display: inline-block;
    color: blue;
    border: 0;
    padding-right: 10px;
    padding-left: 10px;
}

.innerNav li:first-child:before {
    display: none;
}

.innerNav li {
    display: inline-block;
    border-bottom: 3px solid red;
    margin-right: 1em;
    position: relative;
}

.innerNav li + li:before {
    border-left: 1px solid blue;
    content:"";
    display: block;
    height: 100%;
    position: absolute;
    left: -0.5em;
    top: 0;
}