css两条li连接线

发表于前端技术学习版块 css,教程

CSS的两条连接线是一种常见的设计技巧，可以在列表中的每两个相邻的之间增加一条分隔线，增加页面的美观度和可读性。下面介绍CSS实现两条连接线的方法： /* 方法1：使用 border */ li {

CSS的两条

连接线是一种常见的设计技巧，可以在列表中的每两个相邻的

之间增加一条分隔线，增加页面的美观度和可读性。下面介绍CSS实现两条

连接线的方法：

 /* 方法1：使用 border */
  li {
    border-bottom: 1px solid #ccc; /* 在所有<li>下增加1像素的灰色边框 */
  }
  li:last-child {
    border-bottom: none; /* 去掉最后一个<li>下的边框 */
  }

使用border属性可以在每个

下增加一条分隔线，设置为1像素的粗细和相应的颜色即可。最后一个

下的边框需要去掉，可以使用:last-child伪类来实现。

 /* 方法2：使用 ::after 伪元素 */
  li::after {
    content: "";
    display: block;
    height: 1px;
    background-color: #ccc;
    margin: 10px 0; /* 分隔线的上下间距 */
  }
  li:last-child::after {
    display: none; /* 去掉最后一个<li>下的分隔线 */
  }

使用::after伪元素可以在每个

的末尾添加一个空的内容，并通过display:block转化为一个块级元素，再设置它的高度、背景颜色、上下边距即可。同样，最后一个

下的分隔线需要去掉，可以使用:last-child伪类来实现。

文章说明:

本文原创发布于探乎站长论坛，未经许可，禁止转载。

题图来自Unsplash，基于CC0协议。

该文观点仅代表作者本人，探乎站长论坛平台仅提供信息存储空间服务。