css下拉菜单的下划线不能到头

CSS 下拉菜单是网站常见的一种菜单样式，它可以让用户快速访问网站的各个部分。当我们尝试给下拉菜单添加下划线时，可能会遇到下划线不能到头的问题。

/* CSS 代码 */
.dropdown:hover > .dropdown-menu {
    display: block;
}

.dropdown-menu > li > a {
    padding: 10px 20px;
    position: relative;
}

.dropdown-menu > li > a::after {
    content: "";
    display: block;
    height: 2px;
    width: 0;
    background-color: #333;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: width 0.2s ease-in-out;
}

.dropdown-menu > li > a:hover::after {
    width: 100%;
} 

在上述代码中，我们使用了 ::after 伪元素来为下拉菜单添加下划线。下划线的宽度最初为 0，当用户将鼠标放置在菜单项上时，下划线的宽度将变为 100%。

然而，尝试使用上述代码时，我们可能会遇到下划线不能到头的问题，即下划线会在文本的左侧停止，而不是覆盖整个文本。

解决这个问题的方法是给 .dropdown-menu > li > a::after 添加 transform 属性，并将其值设置为 translateX(-50%)。这将使下划线的起点从文本的左侧移到文本正中心。

/* 修正后的 CSS 代码 */
.dropdown-menu > li > a::after {
    content: "";
    display: block;
    height: 2px;
    width: 0;
    background-color: #333;
    position: absolute;
    bottom: 0;
    left: 50%; /* 新增代码 */
    transform: translateX(-50%); /* 新增代码 */
    transition: width 0.2s ease-in-out;
} 

通过添加 transform: translateX(-50%) 属性值，我们可以确保下划线始终从文本中间开始。

总之，CSS 下拉菜单样式是网站设计中最常见的样式之一。在给下拉菜单添加下划线时，我们可能会遇到下划线不能到头的问题，但是通过添加 transform: translateX(-50%) 属性值，我们可以轻松地解决这个问题。