Сделать подчеркивание как underline только без промежутков

Question

Можно ли как-нибудь в css сделать подчеркивание текста (вне зависимости от кол-ва контента) по высоте как underline, но без промежутков от букв?

a {
  font-size: 24px;
  line-height: 30px;
  color: #353535; 
  text-decoration: none;
}

.blog__link-border {
    border-bottom: 2px inset #353535;
}

.blog__link-under {
  text-decoration: underline;
}

<h2>Пример: border, далеко от текста</h2>
<a class="blog__link-border" href="blank.html">10 способов сервировки фруктовых щербетов к столу</a>

<h2>Пример: uderline, промежутки</h2>
<a class="blog__link-under" href="blank.html">10 способов сервировки фруктовых щербетов к столу</a>

Answer 1

Можно градиентом...

a {
  font-size: 24px;
  line-height: 30px;
  color: #353535;
  font-size: 24px;
  line-height: 30px;
  color: #353535;
  text-decoration: none;
  background-image: linear-gradient(0deg, black 0%, white 1px);
  background-position-y: -3px;
  background-repeat: no-repeat;
}

<h2>Пример: border, далеко от текста</h2>
<a class="blog__link-border" href="blank.html">10 способов сервировки фруктовых щербетов к столу</a>

<h2>Пример: uderline, промежутки</h2>
<a class="blog__link-under" href="blank.html">10 способов сервировки фруктовых щербетов к столу</a>


<h2>Пример: uderline, промежутки</h2>
<a class="blog__link-under" href="blank.html">10 способов сервировки фруктовых щербетов к столу10 способов сервировки фруктовых щербетов к столу10 способов сервировки фруктовых щербетов к столу10 способов сервировки фруктовых щербетов к столу10 способов сервировки фруктовых щербетов к столу10 способов сервировки фруктовых щербетов к столу10 способов сервировки фруктовых щербетов к столу10 способов сервировки фруктовых щербетов к столу10 способов сервировки фруктовых щербетов к столу10 способов сервировки фруктовых щербетов к столу</a>

БЛОГ НА HUSL

Сделать подчеркивание как underline только без промежутков

Ответы (1 шт):