Любой способ создать более тонкое подчеркивание в CSS без использования рамки?

Я искал, и все говорят, что вы должны использовать рамку для создания собственного подчеркивания.

Но я хочу, чтобы мой текст привязки был подчеркнут, даже если он разбит на несколько строк (как на узком экране).

HTML: <a>This is a bunch of text which I want to underline and which breaks over 2 lines on a mobile screen.</a>

a {border-bottom: 1px solid} НЕ занимает несколько строк.

a {text-decoration: underline} слишком толстый

Есть ли способ сделать это?

Источник

2 ответа

Решение

Это будет работать только использовать span внутри a

a {
  text-decoration: none;
}

span {
  border-bottom: 1px solid red;
}
<a href="#"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem itaque illum sunt dicta ratione similique numquam a iste iure debitis velit quidem vitae quisquam vel consequuntur, ea atque deserunt maiores!</span></a>

Источник

Кажется, вам не нужно вкладывать какой-либо промежуток, принудительно устанавливать тег A в исходное поведение, которое является "встроенным", и, если это трудно сделать, добавьте флаг "Important"... вы также можете изменить свойства от него в любом из его состояний, так что вы можете играть с цветом и шириной обводки, например

a {
  text-decoration: none;
  position: relative;
  transition: color 350ms linear 0ms, border-color 350ms linear 0ms, top 350ms linear 0ms;
}
a:link, a:visited {
  top: 0em;
  color: #228bb2;
  border-bottom: 2px solid #b25822;
}
a:hover {
  top: 0em;
  color: #b222a6;
  border-bottom: 2px solid #b2a622;
}
a:active {
  top: 0.1em;
}
        <p>
        Lorem ipsum dolor sit amet, consectetur <a href="#">adipiscing elit, sed do eiusmod
        tempor</a> incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
        nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
        irure dolor in reprehenderit <a href="#">in voluptate velit esse cillum dolore eu fugiat nulla
        pariatur. Excepteur sint occaecat cupidatat non proident</a>, sunt in culpa qui officia
        deserunt mollit anim id est laborum.
        </p>

Источник
Другие вопросы по тегам