在列表下用HTML/CSS制作垂直线

我正在尝试复制我在Illustrator中制作的设计（我知道，哈哈，我设计了一些我不知道如何制作的东西！）

所以我制作了一个水平的HTML列表，底部有一个边框。我将尝试以视觉方式演示这一点

概述销售设置

---

每个标题都有下划线（概述、销售、设置），我希望在每个单词的下划线和父div的底部边框之间有一条连接垂直线

到目前为止，我已经得到了每个标题的下划线（使用border bottom而不是underline）以及父div的底部边框

我只是不知道如何在每个列表项下设置垂直线。我试图使用换行符，但它最终改变了整个列表的形状

任何想法/设计都会很棒

提前谢谢灰烬

这里是我的图片下拉框的链接，因为我的代表太低，无法添加图片

代码

---

我完全在猜测您的html结构，因为您没有提供它，但如果它类似于列表（似乎是nav），那么您可以使用after元素来创建底线：

ul{
列表样式：无；
填充：0；
保证金：0；
边框底部：1px纯色灰色；
}
ulli{
显示：内联块；
填充物：5px 5px 10px 5px；
位置：相对位置；
字体大小：粗体；
}
ul li：之后{
内容：''；
显示：块；
位置：绝对位置；
底部：0；
左：50%；
高度：8px；
左边框：1px纯色灰色；
}

概述
销售
背景

我完全在猜测您的html结构，因为您没有提供它，但如果它类似于列表（似乎是导航），那么您可以使用after元素来创建底线：

ul{
列表样式：无；
填充：0；
保证金：0；
边框底部：1px纯色灰色；
}
ulli{
显示：内联块；
填充物：5px 5px 10px 5px；
位置：相对位置；
字体大小：粗体；
}
ul li：之后{
内容：''；
显示：块；
位置：绝对位置；
底部：0；
左：50%；
高度：8px；
左边框：1px纯色灰色；
}

概述
销售
背景

您可以使用

边框底部属性制作
ul
容器

在每个
li
内部，您可以使用
margin auto
或
在文本下方创建
div
：在li上的
伪之后，使用透明度和固定高度以及
1px宽度
左边框/右边框
单击其中一些，使用javascript/jquery，指定颜色。
您可以使用
边框底部属性制作
ul
容器

在每个
li
内部，您可以使用
margin auto
或
在文本下方创建
div
：在li上的
伪之后，使用透明度和固定高度以及
1px宽度
左边框/右边框
单击其中一些，使用javascript/jquery，给我们颜色。
您能给我们展示一下您迄今为止所做的标记/代码吗？如果可能的话，还可以附上illustrator屏幕截图：）@Pyere您可以在提供的链接上找到图片-希望此帮助可以回答有关标记的问题，但不是为您编写标记的。欢迎使用Stack Overflow！寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为、特定的问题或错误以及在问题本身中重现它所需的最短代码。请看，您可以向我们展示您迄今为止所做的标记/代码吗？如果可能的话，还可以附上illustrator屏幕截图：）@Pyere您可以在提供的链接上找到图片-希望此帮助SSO在这里回答有关您的标记的问题，但不在这里为您编写标记。欢迎使用Stack Overflow！寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为、特定的问题或错误以及在问题本身中重现它所需的最短代码。请看，您可能需要调整
li:after
元素的高度，具体取决于字体大小和行距。是的，我稍微改变了一些小东西，但这很好，谢谢您的回答！我删除了我发布的答案。但请记住，这根本不是为了让人觉得我在窃取你的答案。。无论如何，再次抱歉@pete您可能需要调整
li:after
元素的高度，具体取决于字体大小和行距。是的，我稍微修改了一些小东西，但这很好，谢谢您的回答！我删除了我发布的答案。但请记住，这根本不是为了让人觉得我在窃取你的答案。。不管怎样，再次抱歉@Pete
<div class="top-menu-two">
 <div class="top-menu-two-controls">
    <ul>
    <li>
        <object type="image/svg+xml" data="MainOverviewColor.svg" class="svg" id="yolo"></object> 
        <span class="menuText" id="topMenuTwoOverview">Overview</span>
    </li>
    <li class="not-active">
        <object type="image/svg+xml" data="MainAgentsColor.svg" class="svg"></object> 
        <span class="menuText" id="topMenuTwoAgents">Agents</span>
    </li>
    <li class="not-active">
        <object type="image/svg+xml" data="MainSalesColor.svg" class="svg"></object> 
        <span class="menuText" id="topMenuTwoSales">Sales</span>
    </li>
    <li class="not-active">
        <object type="image/svg+xml" data="MainNewQuotationsColor.svg" class="svg"></object> 
        <span class="menuText" id="topMenuTwoNewQuotations">New Quotations</span>
    </li>
    </ul>
</div>

.top-menu-two{
display: inline-block;
width: 100%;
padding: 1% 0% 0% 1%;
float: right;
border-bottom: solid 1px rgb(224,34,80);
}

.top-menu-two-controls{
float: left;
display: inline-block;
font-family: 'HelveticaNeue-Bold';
position: relative;
top: 32%;
margin-left: 20px;
}  

.top-menu-two-controls ul{
padding-left: 0;
font-family: 'HelveticaNeue';
list-style-type: none;
font-size: 20px;
}
.top-menu-two-controls li{
display: inline;
margin-right: 10px;
} 

#topMenuTwoOverview{
border-bottom: solid 3px rgb(224,34,80);
}

#topMenuTwoAgents{
border-bottom: solid 3px rgb(64,143,221);
}

#topMenuTwoSales{
border-bottom: solid 3px rgb(224,224,36);
}

#topMenuTwoNewQuotations{
border-bottom: solid 3px rgb(34,127,20);
}

.svg{
display: inline;
width: 30px;
height: 30px;
margin-right: 10px;
}

.menuText{
position: relative;
top: -8px;
}