ul边界长度为li元素的一半

Question

我希望这个蓝色ul边框在这个黑色li元素下方的中心，并且有50％的子宽度，但我不知道如何实现这一点。我曾尝试:before，但似乎只有一个＆＃34; ul＆＃34;元件。

＆＃13;

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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>