Задать вопрос
@akubenov
javascript

Как сделать эффект text-decoration: underline на всю ширину блока, а не только под текстом?

Необходимо сделать подчеркивание текста на всю ширину блока, где находится текст.
Желательно css :)
Пример:
b8baceb222864e93af208c06c3b12b86.PNG
  • Вопрос задан
  • 6143 просмотра
Комментировать
Подписаться 5 Оценить Комментировать
Решения вопроса 2
@Golumenov
Можно попробовать сделать повторяющийся Repeating-linear-gradient
codepen.io/golumenov/pen/mHvFw
Ответ написан
3 комментария
3 комментария
iiil
@iiil
Инженер и вэб-дизайнер, рисую.
Вариант довольно порнушный )
codepen.io/iiil/pen/uariB

С другой стороны, вариант довольно гибкий. Если Вы используете для подобных картинке случаев, где немного текста, скажем гарантированно не более 10 или 20 строк - вариант хороший.
Ответ написан
2 комментария
2 комментария
Пригласить эксперта
Ответы на вопрос 4
@storaged
Мне кажется лучшее решение это background`ом сделать.
Ответ написан
2 комментария
2 комментария
@Grag 
width: 100%;
border-bottom: 1px solid #000;
text-align:left;
Ответ написан
7 комментариев
7 комментариев
Aliance
@Aliance
Если у вас заранее забитые строки - тогда можно как-то так сделать. Но если есть просто текст, обернутый в див - то в голову ничего не приходит.
Ответ написан
Комментировать
Комментировать
dkorshunov55
@dkorshunov55 
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <style type="text/css">
            p{
                width: 100px;
                text-align: justify;
                text-decoration: underline;
                word-break: break-all;
            }
        </style>
    </head>
    <body>
        <p>
            Как сделать эффект text-decoration: underline на всю ширину блока, а не только под текстом?
        </p>
    </body>
</html>

что делать с расстановкой дефисов точно не могу сказать, если только использовать
&shy; (мягкий перенос)
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript Developer (backend / fullstack)
Brightdata • Тель-Авив
от 5 500 до 6 500 $
Frontend Developer (JavaScript)
R2C
До 4 000 $
Senior Backend JavaScript Node.js Developer
Simplenight inc.
от 4 000 до 6 500 $
Ещё вакансии
Заказы с Хабр Фриланса
Настройка работы в программе OBS STUDIO
04 июл. 2024, в 03:16
1000 руб./за проект
Настроить поддержку квот в LXC контейнере Almalinux 9 на Proxmox 8
04 июл. 2024, в 02:55
5000 руб./за проект
Разработать сигнальное устройство на базе ESP8266 - плата, корпус, по
03 июл. 2024, в 23:35
100000 руб./за проект
Ещё заказы