Question

这里是练习：我有一个主菜单，其中的项目具有不同长度的文本。我想在活动项目下划线（仅文本），但低于常规文本下划线。挖掘互联网后，我想到了这一点：

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

问题是-由于文本的长度不同，因此宽度80％不能很好地适用于所有人。自动取款机我四处创建不同的菜单（梯形图）...在一种代码（因此一个菜单）下处于活动状态时，是否有一种方法可以对每个项目进行不同的样式设置？（例如，在.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%;
}

注意：请记住，如果只有一个孩子，它将对内部孩子不起作用。例如：如果您将a元素内的li元素用于菜单。然后，您需要应用li:nth-child() a:after而不是li a:nth-child():after。

如何从不同长度的文本活动项目下划线？

1 个答案: