Оргструктуры, дерево файлов, турнирные сетки — всё на чистом CSS. Без canvas, без SVG, без JavaScript. Только flexbox и псевдоэлементы.

Разбираем по шагам. Начнём с базового дерева слева направо, где пару десятков строк CSS превращают вот это…(1 photo) во вот это…(2)

HTML — обычные вложенные списки:

<ul class="tree">
  <li>
    <span>1</span>
    <ul>
      <li><span>1.1</span></li>
      <li><span>1.2</span></li>
    </ul>
  </li>
</ul>

Задача: превратить это в дерево с соединительными линиями.

Основная механика — flexbox. Каждый <li> становится flex-контейнером:

li {
  display: flex;
  flex-direction: row;
  align-items: center;
}

Дочерние элементы идут горизонтально, ноды остаются по центру по вертикали.

Первая линия: от родителя к дочерним элементам. Ставим её на <ul>, а не на родительский <li>:

ul::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  border-top: 1px solid;
  width: 2vw;
}

Дальше: линии от каждого ребёнка обратно к родителю. Та же техника, но на <li>:

li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  border-top: 1px solid;
  width: 2vw;
}

Проблема: корневой элемент тоже получает линию, хотя родителя у него нет. Чиним через селектор прямого потомка:

.tree > li {
  padding-left: 0;

  &::before, &::after {
    display: none;
  }
}

Самое тонкое место — вертикальные линии между соседями. Нужны разные высоты:

первый ребёнок — нижняя половина
последний — верхняя половина
все промежуточные — целая линия

Используем ::after:

li::after {
  content: "";
  position: absolute;
  left: 0;
  border-left: 1px solid;
}

li:first-of-type::after { height: 50%; bottom: 0; }
li:last-of-type::after  { height: 50%; top: 0; }
li:not(:first-of-type):not(:last-of-type)::after {
  height: 100%;
}

78 строк CSS — и дерево готово.

Но это только горизонтальный вариант слева направо.

@WebDev_Plus

Хватит использовать библиотеки для рейтингов. Я сделал компонент звездочного рейтинга только на CSS с поддержкой половинок звезд всего в 60 строк. Без JavaScript. Полностью доступный. С плавным hover.

Я посмотрел существующие pure-CSS решения и почти везде одни и те же проблемы.
Либо нет поддержки половинок, либо завязка на FontAwesome, либо дерганый и нестабильный hover.

В итоге я сделал свое решение, используя только radio input’ы, label’ы и SVG-маски.

Ключевая идея упирается в ограничение CSS:
он умеет выбирать только элементы, идущие после текущего (через ~).

А в рейтинге звезд нужно подсвечивать звезды до той, на которую навели курсор.

Решение простое: переворачиваем DOM и визуально отражаем его через flex-direction: row-reverse.

.star-rating {
  display: inline-flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

Порядок в DOM: 5★ → 0.5★
Визуальный порядок: 0.5★ → 5★

Теперь ~ выбирает визуально предыдущие звезды.

Для половинок я разделил каждую звезду на два <label> — левую и правую половину.
Каждый label использует SVG-маску половинки звезды.

nth-of-type(odd) — правая половина
nth-of-type(even) — левая половина

Почему маска, а не background-image?

У background-image нельзя динамически менять цвет заливки SVG.
А mask работает как трафарет — сквозь него просто просвечивает background-color.

В итоге hover — это просто смена цвета.

/* Подсветка при наведении */
label:hover,
label:hover ~ label {
  background-color: goldenrod;
}

/* Подсветка выбранного */
input:checked ~ label {
  background-color: gold;
}

Простые селекторы. Никаких JS-обработчиков.

Отступы между звездами ломают UX hover’а — появляются «мертвые зоны», где ничего не подсвечивается.
Фикс такой: расширяем ширину label, но оставляем mask-size прежним.
Зазор виден визуально, но зона hover остается непрерывной.

Radio-кнопки визуально скрыты, но остаются в DOM.
Скринридеры видят:

* нормальные radio input’ы
* label’ы с aria-label вроде 3 1/2 stars
* полноценную навигацию с клавиатуры

CSS-only — это не компромисс по доступности.

@WebDev_Plus