Да, можно создать адаптивный блок на CSS, который будет подстраиваться под размеры своего содержимого. Это можно сделать с помощью свойств `display: inline-block` или `display: inline-flex`, которые позволяют блоку автоматически изменять свою ширину в зависимости от содержимого.
Чтобы узнать ширину блока, которая изменяется в зависимости от его содержимого с использованием CSS, можно воспользоваться следующими свойствами:
1. `width: auto` - это значение по умолчанию для свойства `width`, которое позволяет элементу автоматически подстраиваться под размеры его содержимого.
2. `min-width: min-content` - это значение свойства `min-width`, которое позволяет элементу быть не меньше, чем его содержимое.
Чтобы добавить бордеры к двум пустым `span`-элементам, можно использовать псевдоэлементы `::before` и `::after`. Для этого нужно задать соответствующие стили для псевдоэлементов и указать им нужные размеры и цвета бордеров, например:
```css
span::before,
span::after {
content: "";
display: inline-block;
width: 1px;
height: 10px;
background-color: black;
}
span::before {
margin-right: 5px;
}
span::after {
margin-left: 5px;
}
```
В данном примере создаются два псевдоэлемента для `span` с помощью `::before` и `::after`. Они имеют ширину 1 пиксель и высоту 10 пикселей, отображаются в виде блоков и имеют черный цвет фона. Между ними добавлен отступ с помощью `margin-left` и `margin-right` для визуального разделения элементов.
