CSS расширяет пространство между текстовой гиперссылкой и ее подчеркиванием - PullRequest
Новая
       22

CSS расширяет пространство между текстовой гиперссылкой и ее подчеркиванием

0 голосов
/ 25 апреля 2019

Есть ли способ увеличить пространство между буквами и подчеркиванием в текстовых гиперссылках с помощью CSS?

CSS, который я планирую использовать: 

.post-body a {
  text-decoration: underline;
}

Мой блогразмещается в Blogger и использует простой шаблон - http://nickalive.blogspot.com

1 Ответ

1 голос
/ 25 апреля 2019

Нет, не используются стандартные настройки text-decoration.

Что вы можете сделать , это заменить подчеркивание псевдоэлементом, который вы можете настроить по своему усмотрению. 

a {
  text-decoration:none;
  margin:1em;
  display: inline-block;
  position: relative;
}

a:after {
  content:"";
  position: absolute;
  left:0;
  bottom:-12px; /* changes distance from text */
  width:100%; /* width of underline */
  height:5px; /* height of underline */
  background: red; /* color or underline */
}
<a href="#">My hyperlink</a>

Текстовое оформление @ MDN

...