Saber2pr's Blog

伪元素实现分割线

在下面的结构中,li 元素之间插入一条分割线:

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

首先可以利用:nth-child()选择器选择 tail 部分,然后在 tail 里的每个 li 加上一个::before 元素,给伪元素设置 border-bottom 实现分割线。代码如下:

li:nth-child(n + 2)::before {
  content: " ";
  display: block;
  border-bottom: 1px solid black;
}

:nth-child 选择器