Как сделать линию не на всю ширину?

Question

frontAng @frontAng

CSS

Как сделать линию не на всю ширину?

как на скрине ( но все в одном псевдо)
6tk7isi8iEc.jpg?size=364x324&quality=96&sign=dfc8ff8d36ad025709212571a7cdb714&type=album

https://jsbin.com/tejapiluko/edit?html,css,output

Вопрос задан 19 сент. 2024
170 просмотров

4 комментария

Подписаться 2 Простой 4 комментария

Ivan Ustûžanin @IvanU7n

указать размер background-а

Написано 19 сент. 2024
Евгений @cyber-jet

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

Написано 19 сент. 2024
Ankhena @Ankhena Куратор тега CSS

Сделать комбинацию из радиального и линейного градиентов. Линия-то со скруглениями.

Умнее взять SVG и не парится. Можно заинлайнить в CSS.

Написано 19 сент. 2024
frontAng @frontAng Автор вопроса

Ankhena, Нельзя использовать несколько position sticky на одной странице?
Почему то только на ios баги...

Написано 14 окт. 2024

Пригласить эксперта

Ответы на вопрос 1

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

CSS

Простой
Растягиваются колонки таблицы, при table { width: 100%} и col: { width: 200px }, как исправить это поведение?
- 1 подписчик
- 18 часов назад
- 68 просмотров
2

ответа
CSS

Простой
Почему не центрируется текст?
- 1 подписчик
- вчера
- 123 просмотра
2

ответа
CSS

Простой
Vite при сборке проекта Laravel + React искажает CSS свойства, как решить?
- 1 подписчик
- 30 мар.
- 174 просмотра
0

ответов
HTML

+1 ещё

Простой
Как наложить на фон ещё объекты с текстом внутри?
- 1 подписчик
- 27 мар.
- 130 просмотров
0

ответов
HTML

+1 ещё

Простой
Как реализовать такой слайдер товаров?
- 1 подписчик
- 25 мар.
- 179 просмотров
0

ответов
HTML

+1 ещё

Простой
Как сделать что бы текст был обернут линией?
- 1 подписчик
- 25 мар.
- 137 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как сделать пролистывание картинок в карточке товара?
- 1 подписчик
- 25 мар.
- 203 просмотра
2

ответа
CSS

Простой
Как вырезать плавно углы у блока css?
- 2 подписчика
- 23 мар.
- 153 просмотра
0

ответов
HTML

+1 ещё

Средний
Как правильно нужно скопировать элемент сайта?
- 1 подписчик
- 22 мар.
- 116 просмотров
1

ответ
CSS

Простой
Как избежать скролла в инпуте при letter-spacing?
- 1 подписчик
- 22 мар.
- 80 просмотров
0

ответов
Показать ещё Загружается…

Web-программист (Bitrix) / PHP, CSS, JS (Fullstack)

OX8.RU

от 70 000 до 150 000 ₽

Фронтенд разработчик Middle

Astra Health Tech • Москва

от 200 000 до 250 000 ₽

Специалист технической поддержки ИТ продукта

inSales

от 60 000 ₽

Обязательно в одном псевдо? Обычно див делают круглым, а линию псевдо с относительным размером.
Сделать комбинацию из радиального и линейного градиентов. Линия-то со скруглениями.

Умнее взять SVG и не парится. Можно заинлайнить в CSS.
Ankhena, Нельзя использовать несколько position sticky на одной странице?
Почему то только на ios баги...

Answer 1 · 2024-09-19 12:28:18

Правильнее будет создать линию и круг в двух отдельных псевдоэлементах, задав размеры и границы:

Как сделать линию не на всю ширину?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт