如何使菜单上的每个类别之间的线条细细？

Question

[我使用角度7应用程序显示，我在左侧菜单上看到报告类别，我面对每个问题之间的问题边框底部

下面的类别和类别更大，因此我需要边框小而薄。

我正在处理stackbliz样本

我尝试在CSS上进行哪些更改

.sideNav > li:first-child {
    border-top: 3px #e5e5e5 solid red;
  }

我将3px设置为0px，但在设计上没有任何改变。

我也尝试html更改此内容

<ul *ngFor="let rep of allReportCategories;let i = index;"  style="margin-top:2px;" 
    class="page-sidebar-menu" data-keep-expanded="false" data-auto-scroll="true" 
    data-slide-speed="200">

我将margin-top :2px更改为0px，但在设计上没有任何改变。

所以我要做的是使边框变小。

我希望在边框后的菜单是小图像，下面有红线。

边框必须薄而不大

更新后的帖子：

<li class="active open">

当从html边框删除上方的行时，左侧边框也被删除

我需要使边框底部变薄而不是较厚

Answer 1

发生这种情况是因为存在:after，我将其删除并添加了一个填充底部，看起来好像可以使用：

我删除了此代码并将其添加到CSS：

/* Removed
.active:after {
    content: "\2212";
}
*/

/* Added */
.active.open{
  padding-bottom:3px;
}

[堆叠闪电战：https://stackblitz.com/edit/create-tym4bg?file=app/app.component.css

这是否解决了您的问题，还是您希望通过其他方式解决？