css - 标记前后的后代伪

Question

真的不能定位子伪类吗？

我需要以某种方式设置或更多第二个后代 ::before 和 ::after 类。

例如，在这里我想在视觉上制作不同的第二个::before(围绕“第一个”列表项)

谢谢

*::before {
  background-color: green;
}

*::after {
  background-color: red;
}

::after,
 ::before {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  content: '';
  position: absolute;
  opacity: .7;
}

::before ::before {
  right: 2px;
}

<h3>Some nice lists!</h3>
<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

Answer 1

由于注释，当 2 个 :before 元素在其自身之上时，您可以移动其中一个。

例如。

ul:before {margin-top: -10px;} /* move 10px above LI:before */

或

ul > li:first-child:before {margin-left: -10px;} /* move just 1st LIs :before */

通过这种方式，您需要浏览所有 2 个 :before/after 元素处于相同位置的位置(父元素和第一个子元素具有相同位置等)