Да, вы можете создать границу с отступом, используя CSS без псевдоэлементов и дополнительных элементов. Один из способов — это использовать свойства `padding`, `background`, и цвет фона элемента. Вот пример, как это можно реализовать:
```html
<ul class="custom-list">
<li>Элемент 1</li>
<li>Элемент 2</li>
<li>Элемент 3</li>
</ul>
```
```css
.custom-list {
list-style-type: none; /* Убираем маркеры списка */
padding: 0; /* Убираем отступы у списка */
}
.custom-list li {
position: relative; /* Для позиционирования псевдоэлемента */
padding: 10px 0; /* Отступы для элементов списка */
border-bottom: 2px solid transparent; /* Создаем границу по умолчанию */
transition: border-color 0.3s; /* Плавный переход для границы */
}
.custom-list li:hover {
border-color: blue; /* Цвет границы при наведении */
}
.custom-list li::after {
content: ''; /* Псевдоэлемент для создания эффекта отступа */
position: absolute; /* Позиционируем его относительно элемента li */
left: 20px; /* Смещение влево */
right: 0; /* Выровниваем по правому краю */
bottom: 0; /* Выровниваем по нижнему краю */
height: 2px; /* Высота границы */
background-color: blue; /* Цвет границы */
opacity: 0; /* Начальное состояние - прозрачный */
transition: opacity 0.3s; /* Плавный переход для прозрачности */
}
.custom-list li:hover::after {
opacity: 1; /* Граница появляется при наведении */
}
```
Однако, если вы хотите полностью обойтись без псевдоэлементов и добавить простую границу с отступом, можно установить отступы для самих элементов списка:
```css
.custom-list li {
padding: 10px 20px; /* Отступы элемента списка */
border-bottom: 2px solid transparent; /* Граница по умолчанию */
transition: border-color 0.3s; /* Для плавного перехода цвета границы */
}
.custom-list li:hover {
border-color: blue; /* Цвет границы при наведении */
}
```
Таким образом, у вас получится в списке два отступа: один для текста, а другой — для самой границы, создавая эффект сдвига. Вы можете регулировать `padding` и `border` по своему усмотрению для достижения желаемого эффекта.