css实现间隔线

最新推荐文章于 2024-12-18 17:05:29 发布

原创最新推荐文章于 2024-12-18 17:05:29 发布 · 801 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

本文介绍了如何利用CSS创建一种特定的间隔线效果，通过在`li`元素后面添加伪元素`::after`，设置其为绝对定位，背景颜色，宽度和高度来实现。代码示例中展示了适用于`ul`和`li`结构的方法，同时也指出可以按需替换其他标签。最后，文章提到这是作者的个人记录，希望能对读者有所帮助。

css实现间隔线

用css实现下图间隔线效果
在这里插入图片描述
以下是代码

ul {
      li {
        &::after {
          display: inline-block;
          content: "";
          width: 2px;
          height: 26px;
          background: #eeeeee;
          position: absolute;
          right: 0;
          top: 0;
          bottom: 0;
          margin: auto;
        }
        &:last-child {
          &::after {
            display: none;
          }
        }
      }
    }