如何给<li>元素添加左侧边框标记激活项？求可行实现方案

没问题！要做出Gmail那种用左侧边框标记激活文件夹的效果，完全不需要照搬它的div结构，用你现有的<li>列表就能轻松实现。核心思路就是定位到包含.active类<a>的<li>元素，给它添加左侧边框（可选搭配浅背景色增强视觉层次），具体方案如下：

方案1：用CSS :has选择器（现代浏览器友好） #

如果你的目标浏览器支持:has选择器（目前Chrome、Firefox 121+、Safari都支持），可以直接通过关联选择器找到对应<li>，不需要修改HTML结构：

/* 匹配包含.active类<a>的<li> */
li:has(a.active) {
  /* 模拟Gmail的红色左侧边框 */
  border-left: 3px solid #d93025;
  /* 可选：添加浅红色背景，和Gmail激活状态一致 */
  background-color: #fce8e6;
  /* 如果原<li>有左内边距，可调整避免内容贴边框 */
  padding-left: 7px; /* 假设原padding-left是10px，减去边框宽度3px */
}

方案2：给

直接添加.active类（兼容旧浏览器） #

如果需要兼容不支持:has的旧浏览器，建议直接给激活状态的<li>也加上.active类（HTML结构调整一下），这样CSS更简单且兼容性更好：

修改后的HTML示例 #

<ul>
  <li class="active"><a class="active">收件箱</a></li>
  <li><a>已发送</a></li>
  <li><a>草稿</a></li>
</ul>

对应的CSS #

li.active {
  border-left: 3px solid #d93025;
  background-color: #fce8e6;
  padding-left: 7px;
}

小技巧 #

• 可以根据需求调整边框的宽度、颜色，或者去掉背景色只保留边框
• 如果你的<li>原本有默认的margin/padding，记得微调数值，保证激活状态下内容布局不会偏移

这样就能完美实现你想要的Gmail风格激活标记啦！

内容的提问来源于stack exchange，提问作者Andy