我可以添加伪元素 "after element" 而不是 "after content of element" 吗？

Question

我一般使用::after添加伪元素，即在元素内容后添加：

.clear-after:after { content: '.'; display:block; height:0; overflow:hidden; clear:both; }

有没有办法在元素之后添加伪元素，我在元素内容之后应用class而不是我在哪里应用 class?

因为如果我有一个包含 10 个项目的列表和一个 3 列的网格，我可以避免每 3 个项目添加一个 clear DOM/HTML 元素 (div)（通常在服务器端完成）并使用 CSS.
完成工作

Answer 1

您不能在元素本身之后添加 ::after 元素，但对于您的特定 "clear every third item" 情况，::nth-child 可以提供帮助：

html {
  font-family: helvetica, Arial, sans-serif;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  float: left;
  width: 33.333%;
  text-align: center;
  margin: 0;
  padding: 0;
}

li:nth-child(3n+1) {
  clear: both;
}

<ul>
  <li>List element 1</li>
  <li>List element 2<br />Some more</li>
  <li>List element 3</li>
  <li>List element 4</li>
  <li>List element 5</li>
  <li>List element 6</li>
  <li>List element 7</li>
  <li>List element 8</li>
  <li>List element 9</li>
</ul>

我可以添加伪元素 "after element" 而不是 "after content of element" 吗？

Can I add Pseudo Element "after element" instead of "after content of element"?

css

dom

css-float

pseudo-element