Ссылки

HTML

<a href="https://ya.ru" class="link">Перейти на ресурс</a>

CSS

.link {
  font-size: 18px;
  color: #1A2C54;
  font-weight: 400;
  line-height: 1.5;
  text-decoration: underline;
  text-underline-position: auto;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
  text-decoration-color: #1A2C54;
  text-decoration-skip-ink: none;
}

.link:hover {
  text-decoration: none;
}

Перейти на ресурс

HTML

<a href="https://ya.ru" class="link-2" target="_blank">Перейти на ресурс</a>

CSS

.link-2 {
  font-size: 18px;
  color: #1A2C54;
  font-weight: 400;
  line-height: 1.5;
  text-decoration: underline;
  text-underline-position: auto;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: #1A2C54;
  text-decoration-skip-ink: all;
}

.link-2:hover {
  text-decoration: none;
}

Как оформить ссылки на HTML и CSS

Готовые сниппеты кода для оформления ссылок в HTML и CSS. Решение подойдет для верстки меню, списков, карточек и кнопок с переходом. Поддерживаются состояния адаптивность и кастомизацию внешнего вида ссылок.

Семантически корректная разметка ссылок (<a href="">)
Поддержка открытий в новом окне и якорных переходов
Стилизация обычных ссылок, кнопок и ссылок с иконками
Полная адаптивность и доступность
Простой и расширяемый CSS-код
Совместимость с любыми HTML-структурами