7.29 Web前端-如何用伪类写分隔线

hello大家好，今天晚上我想说一下分隔线的写法，总所周知，在网页设计中我们会碰到很多分隔线，在我最新的项目小米商城中，我更是不止一次的遇到了分隔线，一般情况下分隔线用边框线设置就可以，但是遇到这种复杂的情况我们就需要用到伪类去写分隔线了。

小米商城分隔线：

上面的分隔线用边框去设置就显得比较困难，所以今天我就来详细说一下如何用伪类做分割线。

首先我们需要确定我们添加分隔线的位置，以我为例在我做这个项目的时候，需要加分隔符的地方都是在li列表中，这里我拿比较难的第一张图片中的分隔线方式举例：

div class="csbox2">
            <ul>
              <li>
                <a href="#"><i class="iconfont">&#xe60d;</i><span>保障服务</span></a>
              </li>
              <li>
                <a href="#"><i class="iconfont">&#xe60f;</i><span>企业团购</span></a>
              </li>
              <li>
                <a href="#"><i class="iconfont">&#xe731;</i><span>F码通道</span></a>
              </li>
              <li>
                <a href="#"><i class="iconfont">&#xe894;</i><span>米粉卡</span></a>
              </li>
              <li>
                <a href="#"><i class="iconfont">&#xe65c;</i><span>以旧换新</span></a>
              </li>
              <li>
                <a href="#"><i class="iconfont">&#xe6c8;</i><span>话费服务</span></a>
            </ul>
          </div>

需要添加的位置如上面代码的位置，所以我们在li的位置添加伪类元素即可，不用在html中添加，直接在css的文件中添加，需要注意的是第一张图中有竖线和横线两种分隔线，所以我们要设置两个伪类代表两种不同的分隔线，代码具体如下：

.csbox2 li::after {
  content: "";
  width: 1px;
  height: 70px;
  position: absolute;
  top: 7px;
  left: 0px;
  background-color: rgb(102, 94, 87);
}
.csbox2 li::before {
  content: "";
  width: 65px;
  height: 1px;
  position: absolute;
  top: 0px;
  left: 6px;
  background-color: rgb(102, 94, 87);
}

注意要选对位置，确定好需要分隔线的li，再给其一个伪类用after后者before都可以，这里我们两者都用上了，宽高可以控制你想要横线还是竖线，还需要对其进行一个绝对定位，与此同时还要给这个li标签一个相对定位，因为这个伪类元素是根据li的位置设定的，top值和left值是给这个线调制位置的，在网页检查中我们可以自由设定偏移量，然后最后把设定好的位置再写入css中，然后最后再给这个伪元素一个背景颜色，就可以写出一个分隔线了，大家可以根据我写的东西练习一下，这个是非常方便的，我们后面可以经常用到。

那么今天就先说到这里哦，谢谢大家的观看，我们明天再见！

7.29 Web前端-如何用伪类写分隔线

猜你喜欢