Могу ли я добавить псевдоэлемент "после элемента" вместо "после содержимого элемента"?

#css #dom #css-float #pseudo-element

#css #dom #css-float #псевдоэлемент

Вопрос:

Обычно я использую ::after для добавления псевдоэлемента, который добавляется после содержимого элемента:

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

Есть ли способ добавить псевдоэлемент после элемента, к которому я применяю класс, а не после содержимого элемента, к которому я применяю класс?

Потому что, если у меня есть список из 10 элементов и сетка из 3 столбцов, я мог бы избежать добавления clear элемента DOM / HTML (div) каждые 3 элемента (обычно выполняется на стороне сервера) и просто выполнять работу с помощью CSS.

1. Для меня это звучит как работа для ::nth-child(n)

2. :: nth-child(n) это селектор. Это не add будет псевдоэлемент «после / следующий / позже».

3. Да, я знаю. Но для вашего конкретного «очистить каждый третий элемент» это идеально: css-tricks.com/useful-nth-child-recipies

4. Я не понимаю! Можете ли вы привести мне пример?

5. @markzzz Я думаю, вы можете очистить элементы с плавающей точкой для сетки, либо используя «очистить div», либо обернув каждую строку элементом…

Ответ №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>