css - 如何在文本不同长度的事件元素中加空格下划线？

Question

这是练习:我有一个主菜单，其中的元素具有不同长度的文本。我想在事件元素下划线(仅文本)，但低于常规文本下划线。挖掘互联网后，我想出了这个:

.current-menu-item:after {
    content: ""; 
    display: block; 
    margin: 0 auto; 
    width: 80%; 
    padding-top: 2px; 
    border-bottom: 1px solid #ffffff; 
}

问题是 - 由于文本的长度不同，宽度 80% 并不适用于所有文本。 Atm 我四处创建不同的菜单(蹩脚的)......当在一个代码(因此一个菜单)下激活时，有没有办法以不同的方式设置每个元素的样式？ (比如在 .current-menu-item 下有一个列表，其中包含 .menu-item-xxx1 的说明，.menu-item-xxx2 的说明等...？)

或者我想知道是否有其他更简单的解决方案？

Answer 1

尝试使用 :nth-child() 设置宽度:

.current-menu-item:after {
   content: ""; 
   display: block; 
   margin: 0 auto;  
   padding-top: 2px; 
   border-bottom: 1px solid #ffffff; 
}

.current-menu-item:nth-child(1):after {
  width: 80%;
}

.current-menu-item:nth-child(2):after {
  width: 90%;
}

注意:请记住，如果只有一个，它不会对内在 child 起作用。例如:如果您在菜单的 li 元素中使用 a 元素。然后你需要应用 li:nth-child() a:after 而不是 li a:nth-child():after。