Как сделать border со смещением?

Question

[0x80070005]

Подскажите пожалуйста, как в списке ul для каждого item сделать вот такой border-bottom со смещением слева, но при это чтобы hover был на всю ширину item без сдвига? Можно ли это сделать без css псевдоэлементов и добавлением элементов тип border-line каждому li?

Answer 1

[Aleksey Solovyev]

Разделите li на два блока: иконку и текст. Для текста задайте бордер:

Comments

[0x80070005]

Спасибо :)

[Ankhena]

0x80070005,
Иконки всё таки лучше делать псевдоэлементами. Нечего пустым дивам делать в разметке.
А border можно заменить на градиентную полоску.

И что-то из этого должно быть интерактивным элементом, а не просто дивом.

[Aleksey Solovyev]

Ankhena, линию то можно нарисовать и через bacgrkound, и через box-shadow (я бы через ::before делал) Суть ответа в разделении на два блока, чтобы не считать отступ:

Иконки всё таки лучше делать псевдоэлементами. Нечего пустым дивам делать в разметке.

там должна быть inline вставлена svg иконка или любая другая разметка

[Ankhena]

Aleksey Solovyev, не надо считать отступ, для этого есть кастомки.
Инлайнить svg для таких штук в 2024 году это моветон.

[Aleksey Solovyev]

Ankhena, можно попросить пример от вас с "кастомки"? не совсем понял о чем вы

[Ankhena]

Aleksey Solovyev,
суть такая:

.elem {
  --width: 50px;
  bg: linear-gradient(to right, transparent var(--width), white var(--width));
  
  &::before {
    width: var(--width);
  }
}

[Aleksey Solovyev]

Ankhena,
Ну рабочий вариант. Спасибо!
А как вы вставлять будете иконку через псевдоэлемент? Так:
content: url(path/to/your.svg);

[Ankhena]

Aleksey Solovyev,

А как вы вставлять будете иконку через псевдоэлемент? Так:
content: url(path/to/your.svg);

Ну уж точно не так.
Вставлять её через content очень неудобно, если нужно как-то управлять размерами. Но, впрочем, если так подходит для задачи, то почему бы и нет. Но чаще всего не подходит.

В фон или маски, если нужно менять цвет.

И иконки разумнее держать в спрайте, в современном, у которого внутри svg, а не symbol.
Альтернатива: заинлайнить прямо в css. Тоже в кастомки.

:root {
--icon-name: url("data:image/svg+xml,%3Csvg width='980' height='980' viewBox='0 0 980 980' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='490' cy='490' r='490' fill='black'/%3E%3C/svg%3E%0A");
}

.block {
  &::before {
    // разное нужное
    mask: var(--icon-name) no-repeat center;
    bg: red;
  }
}

URL-encoder для SVG

[Ankhena]

Ещё более симпатичная конструкция, если иконки разные

:root {
--icon-name: url("data:image/svg+xml,%3Csvg width='980' height='980' viewBox='0 0 980 980' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='490' cy='490' r='490' fill='black'/%3E%3C/svg%3E%0A");

--icon-name2: url("data:image/svg+xml,%3Csvg width='200' height='100' viewBox='0 0 200 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H200V100H0V0Z' fill='%23FF6392'/%3E%3C/svg%3E%0A");;
}

.block {
  &::before {
    // разное нужное
    mask: var(--icon) no-repeat center;
    bg: red;
  }
}

.block--mod1 {
  --icon: var(--icon-name);
}

.block--mod2 {
  --icon: var(--icon-name2);
}

[Aleksey Solovyev]

Ankhena, спасибо!