Максим!
К сожалению, на одном ЦСС это не сделать. Его возможностей пока не хватает, чтобы решить две ключевые задачи такого подчёркивания: понять, что в ссылке есть кавычки, и подчеркнуть всё, кроме кавычек.
Предложу вариант решения с Яваскриптом. Найдём все ссылки, начинающиеся и заканчивающиеся кавычками, и завернём текст внутри них в тег <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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.