Есть ли способ генерировать неограниченные правила стилей из уникального элемента с помощью CSS? (как будто вложено несколько псевдоэлементов)

Question

Только для обучения и экспериментов, есть ли способ создать неограниченное количество стилей CSS с нуля в уникальном элементе без детей? Было бы так, как если бы использовались псевдоэлементы, такие как ::after и ::before, но несколько раз с одним и тем же селектором.

К сожалению, я заметил, что псевдоэлементы ::after и ::before работают как собственныезакрытые элементы (input, img и т. д.), а также эти селекторы в css не поддерживают псевдоэлементы. Поэтому очевидно, что селекторы псевдоэлементов не могут вкладывать другие псевдоэлементы (я надеюсь, что я использую правильный термин) для получения целевого эффекта, потому что они не могут содержать детей ...

Итак, яхочу создавать правила стилей с нуля внутри уникальных элементов без использования вспомогательных дочерних элементов (например, <i></i>, <span></span>, <div></div>), используя только чистый CSS (без JavaScript).

---

Я надеюсь, что этоНебольшой пример использования селектора с несколькими вложенными псевдоэлементами может представлять мою цель:

HTML

<!-- A magnifying glass icon for search bars --> 
<i class="search icon"></i>

CSS

/* Common icon properties */
.icon {
  display: inline-block;
  position: relative;
  width: 1em; height: 1em;
}
/* Search icon initial properties */
.icon.search {
  --stick-color: gray;
}
/* Magnifying glass circle 
generated by using css shapes */
.icon.search::after {
  content: " ";
  position: absolute;
  top: .15em; left: .05em;
  width: .5em; height: .5em;
  border: 0.15em solid;
  border-color: var(--stick-color);
  border-radius: 50%;
}
/* Magnifying glass stick 
generated by using css borders */
.icon.search::after::after {  /* It will not work because */
  content: " ";               /* selectors can't support  */
  position: absolute;         /* several ::after elements */
  top: .9em; left: .55em;
  width: .6em; height: 0;
  background-color: inherit;
  border-bottom: .1em solid var(--stick-color);
  border-top: .1em solid var(--stick-color);
  border-radius: 0 .2em .2em 0;
  transform: rotate(45deg);
  /* Another issue is that, if it could work, it inherit 
     relative current position of first pseudo-element, 
     getting a unexpected behavior.                      */
}

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

---

Для работы в этом примере я должен создать вспомогательный элемент (как span или что-либо еще), а затем затем примените сгенерированный стиль формы ручки к элементу span и псевдоэлементу span::after:

HTML

<!-- A span element added for generate stick shape within it --> 
<i class="search icon"><span></span></i>

CSS

/* Common icon properties */
.icon {
  . . .
}
/* Search icon initial properties */
.icon.search {
  . . .
}
/* Magnifying glass circle 
generated by using css shapes */
.icon.search::after {
  . . .
}
/* Magnifying glass stick 
generated by using css borders */
.icon.search > span {    /* This a auxiliary     */
  display: inline-block; /* element for generate */
  position: absolute;    /* the stick.           */
}
.icon.search > span::after {
  /* previous .icon.search::after::after stuff here */
}

** Результат: * Работает pретти хорошо, но я вынужден использовать элемент, внутри которого нет цели, вы можете увидеть его на скрипке .

---

Примечание: я знаю, чтоя могу использовать javascript для прямой генерации вещей.

Примечание: Извините, если мой английский не понятен.

Answer 1

Похоже, вы пытаетесь создать "Веб-компоненты" с нуля. Существует множество фреймворков / библиотек Javascript с явными возможностями для создания компонентов. Например, вот документы по компонентам Vue .

Эти платформы были разработаны частично, потому что трудно управлять компонентами, используя чистый HTML, CSS и JS. В отличие от псевдоэлементов, большинство компонентов JS поддерживают вложение, итерацию и т. Д. Я полагаю, что чрезвычайно сложно (возможно, невозможно) разработать очень сложные компоненты только с использованием HTML и CSS.

Answer 2

Я немного запутался, но у меня есть два предположения:

1. вы хотели бы применить ::before и ::after псевдоэлементы ко всем тегам i и их дочерним элементам

При условии следующей разметки:

<i><span></span></i>
<div><p></p></div>
<p><span></span></p>

::before и ::after для элементов i и их дочерних элементов

/* to I element and its children */
i::before, i *::before,
i::after, i *::after {
    content: "";
}

Вывод:

::before и ::after для всех элементов

/* To all elements on the page */
*::before,
*::after {
    content: "";
}

Выход:

Вы хотите сгенерировать стили CSS для элементов, как если бы вы работали с языком сценариев:

Для этого вы можете использовать SASS: Sass Basics