使用::after伪元素做下边框时，div内每个列表项后都出现如何解决

问题根因 #

你原来的CSS选择器#OurPart ::after中间存在空格，这属于CSS后代选择器语法，会匹配#OurPart容器内所有后代元素的::after伪元素，所以内部的<li>、<strong>等标签都被强制加上了分隔线样式，才会出现你描述的异常效果。

解决方案 #

如果你的需求是在整个#OurPart区块的末尾添加一条全局分隔线，只需要去掉选择器中间的空格，让伪元素绑定在#OurPart容器本身即可，修改后的CSS代码如下：

#OurPart::after {
  content: "";
  display: block;
  margin: 30px auto 30px;
  width: 20%;
  border-bottom: solid 2px #5d9cd4;
}

如果你的需求是在段落和列表之间加分隔线，也可以单独指定绑定的元素，比如给<p>标签末尾加：

#OurPart p::after {
  content: "";
  display: block;
  margin: 30px auto 30px;
  width: 20%;
  border-bottom: solid 2px #5d9cd4;
}

修改后伪元素只会作用在你指定的单个元素上，不会再批量给内部所有元素添加多余的分隔线。

内容的提问来源于stack exchange，提问作者Uros Vlahovic