优化CSS列表悬停效果：使用border-left创建左侧指示线

最初的尝试可能包括在li:hover状态下直接修改列表项的宽度，并设置背景色来模拟指示线。例如：

.table-of-contents li:hover {
    width: 5px; /* 尝试将宽度设置为指示线的宽度 */
    height: calc(100% - 20px);
    background-color: #785aff;
    border-radius: 5px;
    list-style: none;
    text-indent: 25px;
}

这种方法的问题在于，当

解决方案：利用border-left属性实现稳定指示线

为了优雅地解决上述问题，我们应该避免直接修改

以下是使用border-left实现左侧悬停指示线的CSS代码：

Digram

让Figma更好用的AI神器

下载

立即学习“前端免费学习笔记（深入）”；

.table-of-contents {
  background-color: #F0FAFA;
  padding: 48px;
  border-radius: 48px;
}

.table-of-contents ul {
    margin-left: 30px; /* 确保列表整体有左边距 */
    list-style: none; /* 移除默认列表点 */
    padding-left: 0; /* 重置默认内边距，方便精确控制 */
}

.table-of-contents li {
    padding: 5px 0; /* 为列表项设置一些垂直内边距 */
    transition: all 0.3s ease; /* 添加过渡效果，使悬停更平滑 */
}

.table-of-contents li a {
    text-decoration: none; /* 移除链接下划线 */
    color: inherit; /* 继承父元素颜色 */
    display: block; /* 使链接占据整个列表项区域 */
}

.table-of-contents li:hover {
    /* width: 5px; /* 移除导致问题的宽度设置 */
    border-left: 5px solid #785aff; /* 创建左侧指示线 */
    padding-left: 25px; /* 增加左内边距，将文本推离新边框 */
    /* height: calc(100% - 20px); /* 通常不需要在li上设置固定高度 */
    border-radius: 5px; /* 为边框设置圆角，注意这里对边框整体生效 */
    /* list-style: none; /* 已经在ul中设置 */
    margin-left: -15px; /* 负外边距将li向左移动，使边框与原始对齐 */
}

关键CSS属性解析

• border-left: 5px solid #785aff;: 这是实现左侧指示线的核心。它在
• 元素的左侧添加一个宽度为5px、实心、颜色为#785aff的边框。这个边框不会挤压内容区域的宽度，因此多行文本可以正常显示。
• padding-left: 25px;: 当我们添加了左边框后，文本会紧贴着边框。为了保持文本与边框之间适当的距离，并模拟原始text-indent的效果，我们需要增加
• 元素的左内边距。
• margin-left: -15px;: 默认情况下，列表项
• 会有一个左侧的内边距或外边距，导致其内容相对于父级
  向右偏移。当我们添加了border-left后，这个边框会出现在
  • 的原始左边缘。为了让新添加的边框在视觉上与
    的原始左边缘对齐，或者达到特定的视觉效果，我们可能需要使用负的左外边距将整个
    • 元素向左移动。具体的负值需要根据
      的margin-left或padding-left以及
      • 自身的默认边距进行调整。在示例中，原始
        有margin-left: 30px，
        • 的默认左边距约为20px（取决于浏览器），所以-15px的调整可以使边框在视觉上更靠近
          的起始位置。
        • transition: all 0.3s ease;: 虽然不是解决布局问题的关键，但添加过渡效果可以使悬停时的指示线出现和消失更加平滑，提升用户体验。

        完整示例代码

        结合上述CSS样式和基本的HTML结构，我们可以构建一个具有稳定悬停指示线的列表：

        
        
        
        
        
        
        
        
        
        
        
            
        目录
            
        
                
        链接 1
                
        链接 2
                
        链接 3
                
        这是一个多行文本链接这是一个多行文本链接这是一个多行文本链接这是一个多行文本链接这是一个多行文本链接这是一个多行文本链接这是一个多行文本链接这是一个多行文本链接这是一个多行文本链接这是一个多行文本链接这是一个多行文本链接这是一个多行文本链接
                
        另一个示例链接
            
        
        
        
        

        注意事项与最佳实践

        1. 负外边距的精确调整：margin-left: -15px是一个根据特定布局（ul的margin-left: 30px和浏览器默认li左边距）计算出的值。在实际项目中，您可能需要根据自己的CSS重置或特定样式来调整这个负外边距，以确保指示线能够准确地对齐到期望的位置。
        2. border-radius的应用：在li:hover中设置border-radius: 5px会影响整个li元素的边框，包括我们新添加的border-left。如果只想让指示线的右侧（即li内容的左侧）有圆角效果，而指示线本身的左侧保持直线，可以考虑使用border-radius: 0 5px 5px 0;。
        3. list-style: none;: 为了更好地控制列表项的样式，通常建议在
           元素上设置list-style: none;来移除默认的列表标记。
        4. 可访问性：确保悬停效果不仅仅是视觉上的提示。对于键盘用户，当他们通过Tab键导航时，也应该能看到相应的焦点样式。这通常通过li:focus-within或a:focus来实现。
        5. 语义化HTML：始终使用语义化的HTML结构，例如使用
           和
           • 来表示列表，使用来表示链接。

        总结

        通过本教程，我们学习了如何利用CSS的border-left属性，结合padding-left和margin-left，为列表项创建稳定且美观的左侧悬停指示线效果。这种方法避免了直接修改元素宽度带来的布局问题，尤其是在处理多行文本内容时，能够提供更好的用户体验和更健壮的样式。掌握这种技巧，有助于您在前端开发中实现更精细、更专业的交互式列表样式。