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

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

Необходимо сделать подчеркивание текста на всю ширину блока, где находится текст.
Желательно css :)
Пример:
b8baceb222864e93af208c06c3b12b86.PNG
  • Вопрос задан
  • 6271 просмотр
Комментировать
Подписаться 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 FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
JavaScript Fullstack
OnClass
от 2 000 до 7 000 $
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Собрать из исходного кода и запустить в докере рабочее приложение с бд
22 дек. 2024, в 22:57
350 руб./за проект
Аппликация для фильтра заказов
22 дек. 2024, в 20:40
10000 руб./за проект
Расширение для Google Chrome
22 дек. 2024, в 20:34
3000 руб./за проект
Ещё заказы