下划线:效果结束后，即使宽度回到0px，也要留下一个像素

Question

这是我的代码：

.menu_item::after{
content: "";
display: block;
background-color: black !important;
width: 0px;
height: 2px;
transition: width 0.5s;
}

.menu_item:hover::after{
width: 100%;
}

.menu_item.active::after{
width: 100%;
}

它只是通过使内容后：：的宽度从0变为100%来进行类似下划线的效果转换，因此当鼠标离开.menu_item时，宽度确实从100%变回0。问题是，下划线从100%恢复到0px后，会在1px上停留几秒钟，这很令人不快。有什么我可以做的，还是我必须保留的？

问题出现在"；Qualcosa su di me"；

Answer 1

我刚刚将.menu_item的背景颜色更改为容器的bg颜色，并将其添加到转换中：

.menu_item::after{
content: "";
display: block;
background-color: RGBA(190, 0, 40, 0);
width: 0px;
height: 2px;
transition: width 0.5s, background-color 0.7s;
}

.menu_item:hover::after{
background-color: black;
width: 100%;
}

.menu_item.active::after{
background-color: black;
width: 100%;
}

这样做会让它继续下去"；不可见的"；在显示1px 之前