css中li中加横线

CSS中可以通过伪元素和伪类来给li元素添加横线效果。伪元素是CSS中的一种特殊元素，可以在指定元素的前面或后面插入内容，而伪类则是对元素的特定状态进行选择和样式化。

要给li元素添加横线，可以使用伪元素::before或::after来插入一个具有横线样式的元素。通过设置伪元素的content属性为空字符串，再设置border-bottom属性来实现横线效果。

下面是一个示例代码，展示了如何给li元素添加横线：

li::before {
  content: "";
  display: block;
  border-bottom: 1px solid black;
  margin-bottom: 10px;
}

在上面的示例中，我们使用了伪元素::before来在每个li元素前插入一个具有横线样式的元素。通过设置content属性为空字符串，使其不显示任何内容。然后，通过设置display属性为block，使其成为一个块级元素，从而占据一行。通过设置border-bottom属性来定义横线的样式，这里我们使用了1像素的实线边框，并将其颜色设置为黑色。为了增加横线与li元素之间的间距，我们还设置了margin-bottom属性为10像素。

除了使用伪元素::before，我们也可以使用伪元素::after来实现类似的效果。只需要将上述代码中的::before替换为::after即可。

我们还可以结合伪类来对li元素的特定状态进行样式化。例如，可以使用伪类:hover来在鼠标悬停时给li元素添加横线效果：

li:hover::before {
  border-bottom-style: dashed;
}

在上述代码中，我们使用了伪类:hover来选择鼠标悬停在li元素上的状态。然后，通过设置border-bottom-style属性为dashed，将横线样式改为虚线。这样，在鼠标悬停时，li元素的横线样式将改变。

通过使用伪元素和伪类，我们可以很方便地给li元素添加横线效果。通过设置伪元素的content属性为空字符串，并设置border-bottom属性来定义横线的样式，可以实现基本的横线效果。而结合伪类，我们还可以根据元素的特定状态来改变横线的样式，从而实现更加灵活的效果。