Вверх

Блог
RSS лента

Нижнее подчеркивание текста пунктиром...

Доброго времени суток читатель. Если ты зашел сюда и читаешь эту статью значить тебе не подходит text-decoration:underline;
И ты хочешь красивое подчеркивание и может даже другого цвета в отличии от ссылки.
А сделать такое можно таким способом:

  1. a {
  2.        color:#fff;
  3.        border-bottom:1px dashed #fff;
  4.        text-decoration:none;
  5. }
  6. a:hover {
  7.         text-decoration:none;
  8.         border-bottom:0px;
  9. }

Строчка border-bottom:1px dashed #fff;, означает что мы делаем нижнее подчеркивание пунктиром и белого цвета, color:#fff; это цвет ссылки, text-decoration:none; ставим что бы невзначай где то не вылезло стандартное подчеркивание.
При наведении я убераю подчеркивание, но можно его сделать например другим шрифтом, или приминив нижний паддинг увеличть ростояние мужду словом и подчеркиванием. В общем способов использования много, экспериментируйте.
В общем то вроде и всё. Пользуйтесь на здоровье.

Ваша оценка: Пусто Средняя: 3.5 (6 votes)

Комментарии

а примеры показать?

ясно что и так все ясно но примеры это всегда круче чем нет примеров и нагляднее

Я как то даже не задумывался

Я как то даже не задумывался о том что нужно пример для этого момента. ПО сути если человек зашел в эту статью с поисковика значит он уже знает что ищет. Пример может быть меню слева (Рубрикатор блога), там правда бекграундом сделано, но бордером очень похоже.

Отправить комментарий

 
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Строки и параграфы переносятся автоматически.
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>. Beside the tag style "<foo>" it is also possible to use "[foo]".
  • Image links with 'rel="lightbox"' in the <a> tag will appear in a Lightbox when clicked on.
  • Image links from G2 are formatted for use with Lightbox2
  • Image links with 'rel="lightshow"' in the <a> tag will appear in a Lightbox slideshow when clicked on.
  • Links to HTML content with 'rel="lightframe"' in the <a> tag will appear in a Lightbox when clicked on.
  • Links to video content with 'rel="lightvideo"' in the <a> tag will appear in a Lightbox when clicked on.
  • Links to inline or modal content with 'rel="lightmodal"' in the <a> tag will appear in a Lightbox when clicked on.

Подробнее о форматировании

CAPTCHA
Если вы человек, то тогда введите символы изображенные на картинке ниже
Image CAPTCHA
Введите символы, изображенные на картинке.
Главная | Портфолио | Услуги | Контакты | Блог