x
 
Павел
10 января 2013

Подскажите, как правильно сделать подчёркивание многострочного текста, чтобы линия была, допустим, в три пикселя?



Первое, что приходит на ум:

<style>
  .underlined {
    border-bottom: 3px solid #aaa;
  }
</style>

<p>
  <span class="underlined">Кластерное вибрато...</span>
</p>
  • Кластерное вибрато полифигурно образует фьюжн, потому что современная музыка не запоминается.

Второе — сделать линию фоном — простой картинкой или, например, ЦСС-градиентом. В этом случае можно управлять позицией, подтянуть бордер к тексту:

.underlined {
  background-image: linear-gradient(#aaa, #aaa);
  background-position: 0 95%;
  background-size: 100% 3px;
  background-repeat: repeat-x;
}
  • Кластерное вибрато полифигурно образует фьюжн, потому что современная музыка не запоминается.


P. S.
Это был совет о разработке веб-интерфейсов. Хотите узнать всё об умной вёрстке, правильных скриптах, грациозной деградации, трюках и работе технолога с дизайнером? Присылайте вопросы.

Поделиться
Отправить

Комментарии

Антон Олегович
24 декабря 2014

Можно сделать подчёркивание при наведении на элемент на любом уровне и любой толщины при использовании данного костыля. Даже сверху при задании отрицательного смещения:

<div class=«test»>
Текст для подчеркивания
</div>

Стили:

.test{
box-shadow: none;
}
.test:hover {
display: inline;
box-shadow: 0px 7px 0px #fff, 0px 8px 0px #333; // регулируем подчёркивание смещением двух теней
}


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

EM или REM? 6 Можно ли достичь эффекта переливания без встраивания видео на сайт? 1




Недавно всплыло

Как избежать «эффекта Тильды»? 2 1 Как вы верифицируете оценку сроков от сотрудника? 1 7