Question

我通常使用::after添加一个伪元素，在元素的内容之后添加：

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

有没有办法在我应用类的元素之后添加伪元素而不是在我应用类的元素内容之后添加？

因为如果我有10个项目的列表和3列的网格，我可以避免每3个项目（通常在服务器端完成）添加clear DOM / HTML元素（div）并且只做CSS的工作。

Answer 1

你不能在元素本身之后添加一个:: after元素，但对于你特定的“清除每一个第三项”的情况，:: 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>

我可以在“元素后”而不是“元素内容之后”添加伪元素吗？

1 个答案: