html - ul 边框长度为 li 元素的一半

Question

我希望这个蓝色的 ul 边框像在这个黑色 li 元素下面的中心，并且有 50% 的子宽度，但我不知道如何我能做到吗？我试过 :before 但似乎它只适用于一个“ul”元素。

#one{
    width: 300px;
    height: 600px;
    background-color: rgba(0, 0, 0, 0.4);
}
ul{
    list-style-type: none;
}

.a{
    border-bottom: 4px solid blue;
    
}

.b
{
    width: 200px;
    height: 100px;
    background-color: black;
    margin: 20px;
}

<div id="one">
    <ul class="a">
        <li class="b"></li>
        <li class="b"></li>
    </ul>   
    <ul class="a">
        <li class="b"></li>
        <li class="b"></li>
    </ul> 
</div>

Answer 1

如果我正确理解你的问题，你可以删除你的边框样式，并在它的位置使用它:

li {
  position: relative;
}

li:last-of-type:after {
  content: '';
  position: absolute;
  left: 25%;
  width: 50%;
  bottom: -12px;
  border-bottom: 4px solid blue;
}

片段:

#one{
    width: 300px;
    height: 600px;
    background-color: rgba(0, 0, 0, 0.4);
}
ul{
    list-style-type: none;
}

.b
{
    width: 200px;
    height: 100px;
    background-color: black;
    margin: 20px;
}

li {
  position: relative;
}

li:last-of-type:after {
  content: '';
  position: absolute;
  left: 25%;
  width: 50%;
  bottom: -12px;
  border-bottom: 4px solid blue;
}

<div id="one">
    <ul class="a">
        <li class="b"></li>
        <li class="b"></li>
    </ul>   
    <ul class="a">
        <li class="b"></li>
        <li class="b"></li>
    </ul> 
</div>