Школа
Веб-разработка

Как сделать подчёркивание ссылки, как у Бирмана?

Как сделать с помощью ЦСС подчёркивание ссылки, как у Бирмана?

Притом что:
— Подчёркивание не стандартное, а полупрозрачный нижний бордюр.
— Технически под ссылкой должна быть вся надпись, включая кавычки, а не только подчёркнутая часть.
— В России используются минимум три вида кавычек, а вообще их двадцать видов.

Максим Ильяхов
6 июня 2024
👁 2354  
Веб-разработка

Как сделать подчёркивание ссылки, как у Бирмана?

Как сделать с помощью ЦСС подчёркивание ссылки, как у Бирмана?

Притом что:
— Подчёркивание не стандартное, а полупрозрачный нижний бордюр.
— Технически под ссылкой должна быть вся надпись, включая кавычки, а не только подчёркнутая часть.
— В России используются минимум три вида кавычек, а вообще их двадцать видов.

Максим Ильяхов
6 июня 2024
👁 2354  
Василий Половнёв
Технический директор бюро
Полезно
Непонятно
Войдите в Бюросферу, чтобы голосовать

Максим!

К сожалению, на одном ЦСС это не сделать. Его возможностей пока не хватает, чтобы решить две ключевые задачи такого подчёркивания: понять, что в ссылке есть кавычки, и подчеркнуть всё, кроме кавычек.

Предложу вариант решения с Яваскриптом. Найдём все ссылки, начинающиеся и заканчивающиеся кавычками, и завернём текст внутри них в тег <u>:

const QUOTATION_MARKS = '"\'«»‘’‚‛“”„‟‹›' // Перечень возможных кавычек
const PUNCTUATION_MARKS = '.!?:;,' // Перечень возможных знаков препинания, стоящих после последней кавычки

const surroundedByQuotationMarks = new RegExp(`^([${QUOTATION_MARKS}]{1})(.*)([${QUOTATION_MARKS}]{1}[${PUNCTUATION_MARKS}]?)$`) // Магическое регулярное выражение, чтобы найти и заменить ссылки, начинающиеся (^) с кавычки и заканчивающиеся ($) кавычкой с необязательным знаком препинания

Array.from(document.querySelectorAll('a')) // Находим все ссылки
  .filter(a => surroundedByQuotationMarks.test(a.textContent)) // Отбираем нужные нам
  .forEach(a => a.innerHTML = a.innerHTML.replace(surroundedByQuotationMarks, '$1<u>$2</u>$3')) // Заворачиваем содержимое в <u>

Об этом читайте в книге «Чей нос лучше?».

Об этом читайте в книге «Сынок, где мой „Зенит“?».

А это обычная ссылка

И добавим стилей:

a,
a u {
  text-decoration: none; /* Убираем дефолтное подчёркивание у ссылок и <u> внутри */
  border-bottom: 1px solid color-mix(in srgb, currentColor, transparent 80%); /* Задаём нижний бордер, смешивая текущий цвет ссылки с небольшой прозрачностью */
}

a:has(u) {
  border-bottom: none; /* Если в ссылке есть <u>, не подчеркиваем саму ссылку */
}

a:hover,
a:hover u {
  border-bottom-color: currentColor; /* По ховеру подчеркиваем ссылку и <u>, если есть */
}

Об этом читайте в книге «Чей нос лучше?».

Об этом читайте в книге «Сынок, где мой „Зенит“?».

А это обычная ссылка

Лучше использовать подчёркивание с text-decoration: underline вместо бордера. Современный ЦСС даёт управлять толщиной и положением подчёркивания. В случае с бордером мы можем управлять только толщиной.

a,
a u {
  text-decoration: underline;
  text-decoration-thickness: 1px; /* Задаём толщину подчёркивания */
  text-underline-offset: .175em; /* Задаём сдвиг подчёркивания */
  text-decoration-color: color-mix(in srgb, currentColor, transparent 80%);
  text-decoration-skip: none; /* Запрещаем подчёркиванию пропускать выносные элементы букв */
  text-decoration-skip-ink: none;
}

a:has(u) {
  text-decoration: none;
}

a:hover,
a:hover u {
  text-decoration-color: currentColor;
}

Об этом читайте в книге «Чей нос лучше?».

Об этом читайте в книге «Сынок, где мой „Зенит“?».

А это обычная ссылка

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Полезно
Непонятно
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментариев пока нет

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

Рекомендуем другие советы