时间戳

首页 > 解决方案 > 如何在文本不同长度的活动项中用空格加下划线？

css - 如何在文本不同长度的活动项中用空格加下划线？

问题描述

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

.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 的说明等...？）

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

标签： csselementor

解决方案

尝试使用: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。

推荐阅读