Keterangan

Menambahkan hiasan teks berupa garis bawah, coretan, garis di atas teks dan kedipan. Anda dapat menerapkan lebih dari satu gaya sekaligus dengan mencantumkan nilai yang dipisahkan oleh spasi.

Sintaksis

dekorasi teks: [berkedip || garis tembus || garis atas || garis bawahi ] | tidak ada | mewarisi

Nilai-nilai

line-through Membuat teks line-through (contoh).

underline Mengatur teks yang akan digarisbawahi (contoh).

none Membatalkan semua efek, termasuk tautan yang digarisbawahi, yang disetel secara default.

mewarisi Nilai yang diwarisi dari induknya.

HTML5 CSS2.1 YAITU Cr Op Sa Fx

dekorasi teks

Serangan strategis

Model Objek

dokumen.getElementById("elementID").style.textDecoration

dokumen.getElementById("elementID").style.textDecorationBlink

dokumen.getElementById("elementID ").style.textDecorationLineThrough

dokumen.getElementById("elementID ").style.textDecorationNone

dokumen.getElementById("elementID").style.textDecorationOverLine

dokumen.getElementById("elementID").style.textDecorationUnderline

Apa yang salah dengan dekorasi teks biasa: garis bawah? Dalam skenario yang ideal, garis bawah harus melakukan hal berikut:

• posisinya di bawah garis dasar;
• lewati info;
• mengubah warna, ketebalan dan gaya garis;
• bekerja dengan teks multibaris;
• bekerja pada latar belakang apa pun.

Saya percaya ini semua adalah persyaratan yang masuk akal, tetapi sejauh yang saya tahu tidak ada cara intuitif untuk mencapai hal ini menggunakan CSS.

Pendekatan

Jadi apa saja cara berbeda yang bisa kita terapkan untuk menggarisbawahi di web?

Inilah yang saya pertimbangkan:

• dekorasi teks;
• batas bawah;
• bayangan kotak;
• gambar latar belakang;
• filter SVG;
• Garis bawah.js(kanvas);
• dekorasi-teks-* .

Mari kita lihat metode ini satu per satu dan bahas kelebihan dan kekurangan masing-masing metode.

overline Sebuah garis melewati teks (contoh).

dekorasi teks adalah cara paling jelas untuk menggarisbawahi teks. Anda menerapkan satu properti dan itu sudah cukup. Pada ukuran font kecil ini mungkin terlihat baik-baik saja, namun memperbesar ukuran font dan garis bawah mulai terlihat aneh.

Masalah terbesar dengan dekorasi teks adalah kurangnya penyesuaian. Anda dibatasi pada warna dan ukuran font teks dan tidak ada cara lintas browser untuk mengubahnya. Kami akan membicarakan hal ini lebih detail nanti.

• mudah digunakan;
• diposisikan di bawah garis dasar;
• melewatkan info secara default di Safari dan iOS;
• menekankan teks multiline;
• bekerja pada latar belakang apa pun.

• tidak melewatkan footer di semua browser lain;
• tidak mengizinkan Anda mengubah warna, ketebalan, atau gaya garis.

perbatasan-bawah

border-bottom memberikan keseimbangan yang baik antara kesederhanaan dan kemampuan penyesuaian. Pendekatan ini menggunakan properti perbatasan CSS lama yang bagus, artinya Anda dapat dengan mudah mengubah warna, ketebalan, dan gaya.

Ini adalah tampilan border-bottom untuk elemen sebaris.

Kelemahan utamanya adalah jarak garis bawah dari teks; garis bawah seluruhnya berada di bawah info. Anda dapat memperbaikinya dengan menyetel elemen ke inline-block dan mengurangi line-height , tetapi Anda akan kehilangan kemampuan untuk membungkus teks. Bagus untuk jalur individu, tetapi tidak cocok di tempat lain.

Selain itu, kita dapat menggunakan text-shadow untuk mengaburkan bagian garis di sebelah elemen inline, menyimulasikannya dengan menggunakan warna yang sama dengan latar belakang. Artinya, teknik ini hanya bekerja pada latar belakang satu warna sederhana, tanpa gradien, pola, atau gambar.

Saat ini, kami sudah menggunakan sebanyak empat properti untuk mendesain satu garis. Ini lebih banyak pekerjaan daripada sekadar menambahkan dekorasi teks.

• dapat melewati info menggunakan text-shadow ;
• dapat mengubah warna, berat dan gaya garis;
• memungkinkan Anda menggunakan transisi dan animasi warna dan keberanian;
• bekerja dengan teks multibaris kecuali blok sebaris diterapkan;
• Berfungsi pada latar belakang apa pun selama Anda tidak menggunakan text-shadow .

• Diposisikan terlalu rendah dan dipindahkan dengan cara yang sulit;
• banyak properti tambahan digunakan untuk pengoperasian yang benar;
• saat menggunakan text-shadow, penyorotan teks terlihat jelek.

bayangan kotak

box-shadow menggambar subline menggunakan dua bayangan dalam: satu membuat persegi panjang, dan yang kedua menyembunyikan sebagiannya. Ini berarti Anda memerlukan latar belakang warna solid agar ini berfungsi.

Anda dapat menggunakan trik yang sama dengan text-shadow untuk mengisi celah antara garis bawah dan info. Namun jika warna garis bawah berbeda dari warna teks - atau cukup tipis - garis tidak akan bertabrakan dengan info seperti halnya dengan text-decoration .

• memungkinkan Anda mengubah warna dan ketebalan garis;
• bekerja dengan teks multiline.

• tidak mengizinkan Anda mengubah gaya garis bawah;
• Tidak berfungsi pada latar belakang apa pun.

gambar latar belakang

Metode gambar latar paling dekat dengan yang kita inginkan dan memiliki kekurangan paling sedikit. Idenya adalah menggunakan gradien linier dan posisi latar belakang untuk membuat gambar yang berulang di bawah baris teks.

Agar pendekatan ini berhasil, teks harus dalam tampilan standar: inline; .

Opsi berikutnya tanpa linear-gradient , untuk efek Anda dapat menambahkan gambar latar belakang Anda sendiri.

• dapat diposisikan di bawah garis dasar;
• dapat melewati elemen info menggunakan text-shadow ;
• bekerja dengan gambar khusus;
• membungkus beberapa baris teks;
• Berfungsi pada latar belakang apa pun selama Anda tidak menggunakan text-shadow .

• Ukuran gambar dapat bervariasi tergantung pada resolusi layar, browser, dan pembesaran.

Filter SVG

Saya sudah cukup sering bermain-main dengan metode ini. Anda dapat membuat filter garis SVG yang menggambar garis dan kemudian memperluas teks untuk menutupi bagian garis yang ingin kita jadikan transparan. Anda kemudian dapat memberikan id pada filter dan mereferensikannya dalam CSS seperti filter: url('#svg-underline') .

Manfaat dari pendekatan ini adalah transparansi dicapai tanpa menggunakan text-shadow , artinya kita membiarkan info muncul di latar belakang apa pun, termasuk gradien dan gambar latar belakang! Ini hanya berfungsi pada satu baris teks, jadi ingatlah itu.

Berikut tampilannya di Chrome dan Firefox:

Dukungan di IE, Edge dan Safari bermasalah. Sulit untuk menguji dukungan filter SVG di CSS. Anda dapat menggunakan arahan @supports dengan filter , tetapi ini hanya akan memeriksa apakah tautan ke filter berfungsi, bukan filter itu sendiri. Upaya saya berakhir dengan penentuan kemampuan browser yang membosankan; ini adalah kelemahan nyata dari metode ini.

• dapat diposisikan di bawah garis dasar;
• dapat melewati elemen ekstensi;
• memungkinkan perubahan warna garis, ketebalan dan gaya;
• bekerja pada latar belakang apa pun.

• tidak berfungsi dengan teks multibaris;
• tidak berfungsi di IE, Edge, dan Safari, tetapi Anda dapat menggunakan dekorasi teks sebagai cadangan, tampilannya bagus di Safari.

Underline.js (Kanvas)

Underline.js sangat menarik. Saya merasa sangat mengesankan apa yang telah dicapai Wenting Zhang dengan penguasaan JavaScript dan perhatiannya terhadap detail. Jika Anda belum melihat demo teknologi Underline.js, berhentilah membaca dan tunggu sebentar. Ada juga pembicaraan sembilan menit darinya tentang cara kerjanya, tapi saya akan singkat saja: Garis bawah digambar menggunakan elemen . Ini adalah pendekatan baru yang ternyata berhasil dengan sangat baik.

Meskipun namanya menarik, Underline.js hanyalah demo teknis. Artinya, Anda tidak bisa begitu saja menyambungkannya ke proyek Anda tanpa mengubah kodenya.

Saya pikir saya akan menyebutkan ini sebagai bukti konsep itu memiliki potensi untuk membuat garis bawah interaktif yang hebat, namun Anda perlu menulis JavaScript Anda sendiri agar dapat berfungsi.

Properti dekorasi teks baru

Anda ingat bahwa saya berjanji untuk berbicara lebih banyak tentang dekorasi teks. Waktunya telah tiba.

Properti ini berfungsi dengan baik, namun Anda dapat menambahkan beberapa properti eksperimental untuk menyesuaikan tampilan garis bawah.

• teks-dekorasi-warna
• lewati dekorasi teks
• gaya dekorasi teks

Tapi jangan terlalu bersemangat... Dukungan browser seperti biasa. Hal-hal seperti itu.

teks-dekorasi-warna

Properti text-decoration-color memungkinkan Anda mengubah warna garis bawah secara terpisah dari warna teks. Dukungan untuk properti ini lebih baik dari yang Anda harapkan - ini berfungsi di Firefox dan dengan awalan di Safari. Inilah masalahnya: jika Anda memiliki info, Safari akan memberi garis bawah di atas teks.

lewati dekorasi teks

Properti text-decoration-skip memungkinkan melewatkan info dalam teks yang digarisbawahi.

Properti ini non-standar dan saat ini hanya berfungsi di Safari, dengan awalan -webkit-. Safari mengaktifkan properti ini secara default, sehingga info tidak selalu muncul.

Jika Anda menggunakan Normalisasi, harap perhatikan bahwa versi terbaru menonaktifkan properti ini demi perilaku browser yang konsisten. Dan jika Anda ingin garis bawah tidak mempengaruhi info, Anda perlu mengaktifkannya secara manual.

gaya dekorasi teks

Properti text-decoration-style menawarkan pilihan gaya yang sama seperti properti border-style, dengan tambahan gaya bergelombang.

Berikut adalah daftar nilai yang tersedia:

• putus-putus
• burik
• dobel
• padat

Saat ini properti text-decoration-style hanya berfungsi di Firefox, berikut tangkapan layarnya:

Apa yang hilang

Rangkaian properti text-decoration-* jauh lebih intuitif untuk digunakan dibandingkan properti dekorasi garis bawah CSS lainnya. Namun jika kita perhatikan lebih dekat, tidak ada cukup cara untuk mengatur ketebalan atau posisi garis untuk memenuhi kebutuhan kita.

Setelah sedikit riset, saya menemukan beberapa properti lagi:

• lebar garis bawah teks
• posisi teks-garis bawah

Ini tampaknya merupakan rancangan awal CSS, namun tidak pernah diterapkan di browser karena kurangnya minat.

Kesimpulan

Jadi apa cara terbaik untuk menggarisbawahi?

Untuk teks kecil, saya sarankan menggunakan text-decoration dengan tambahan text-decoration-skip yang optimis. Ini terlihat agak norak di sebagian besar browser, namun garis bawah selalu seperti ini di browser dan orang-orang tidak akan menyadarinya. Selain itu, selalu ada kemungkinan, jika Anda memiliki kesabaran, garis bawah tersebut akan terlihat bagus suatu hari nanti tanpa Anda harus mengubah apa pun seperti yang dilakukan browser.

Untuk teks isi masuk akal untuk menggunakan background-image . Pendekatan ini berhasil, tampak hebat, dan ada mixin Sass untuk itu. Pada prinsipnya, Anda dapat melewatkan bayangan teks jika garis bawahnya tipis atau warnanya berbeda dari teks.

Untuk satu baris teks, gunakan border-bottom bersama dengan properti tambahan lainnya.

Dan jika Anda memerlukan info untuk muncul pada gradien atau latar belakang gambar, coba gunakan filter SVG. Atau hindari penggunaan garis bawah.

Di masa depan, ketika dukungan browser menjadi lebih baik, satu-satunya jawaban adalah kumpulan properti text-decoration-*.

Saya juga merekomendasikan untuk melihat artikel Benjamin Woodroffe CSS Underlines Suck, yang membahas masalah yang sama.

Properti CSS text-decoration bertanggung jawab untuk mendekorasi teks dalam bentuk garis bawah. Anda dapat membuat garis bawah atau garis bawah atas. Anda juga dapat mencoret teks atau menerapkan semua garis bawah sekaligus.

Sintaks dekorasi teks CSS

...dekorasi teks: tidak ada|garis bawah|garis atas|garis-melalui|mewarisi; ...

• tidak ada - teks tanpa hiasan
• garis bawah - garis bawah
• garis atas - garis bawah
• line-through - teks yang dicoret
• berkedip - teks berkedip (disarankan untuk tidak menggunakan nilai ini)

Anda dapat menentukan beberapa nilai. Misalnya

dekorasi teks : garis bawah garis atas ;

Cara mengubah gaya dan warna garis bawah

Untuk mengubah gaya garis bawah ada properti khusus text-decoration-style :

gaya dekorasi teks: padat|ganda|putus-putus|putus-putus|bergelombang;

• padat - garis bawah padat
• ganda - garis ganda
• putus-putus - garis putus-putus
• putus-putus - garis putus-putus
• bergelombang - garis bergelombang

Untuk mengubah warna garis bawah, gunakan properti text-decoration-color:

gaya-dekorasi teks: warna;

warna dapat mengambil nilai berupa RGB, nama warna (lihat kode dan nama warna html untuk situs)

Sayangnya, properti text-decoration-style dan text-decoration-color tidak didukung oleh hampir semua browser (ini sudah tahun 2016).

Contoh dengan garis bawah

Contoh 1: Garis bawah sederhana

Обычный текст. Нижнее подчеркивание Верхнее подчеркивание

Обычный текст.

Нижнее подчеркивание

Верхнее подчеркивание

Верхнее и нижнее подчеркивание

Пример 2. Зачеркнутый текст

Обычный текст. Зачеркнутый текст

Вот как это выглядит на странице:

Обычный текст. Зачеркнутый текст

Пример 3. Меняем цвет и тип подчеркивания

Обычный текст.

Вот как это выглядит на странице:

Обычный текст.
Красное подчеркивание с пунктирной линией

Если вы не видите каких-то изменений в последнем примере, то можно попробовать использовать проверенный способ с помощью свойства border-bottom :

border-bottom : 1px datted red ;

Для обращения к text-decoration из JavaScript нужно писать следующую конструкцию:

object.style.textDecoration ="VALUE "

От автора: стилизация подчеркиваний ссылок – довольно сложное занятие, и я постоянно забываю, какой способ лучше подходит в той или иной ситуации. К счастью, Джон Джеймсон поможет нам быстро разобраться в этом в своей статье.

Существует множество способов, как стилизовать подчеркивания. Возможно, вы помните статью «создаем подчеркивания ссылок на Medium ». Medium не пытались делать что-то из рамок вон выходящее, они хотели просто создать привлекательные подчеркивания в тексте.

Тонкие, черные подчеркивания с пробелами вокруг букв с нижними выносками – работа Марсин Витчэри из статьи создаем подчеркивания ссылок на Medium.

Хорошее стандартное подчеркивание, которое к тому же имеет хороший размер и пропускает нижние выносные части букв. Намного лучше, чем в большинстве браузеров по умолчанию. Как оказалось, Medium столкнулись с множеством проблем на своем пути. И даже два года спустя до сих пор хорошая стилизация подчеркиваний вызывает много проблем.

Цели

Почему бы просто не использовать text-decoration: underline? Если мы говорим об идеальном сценарии, подчеркивания должны:

располагаться ниже базовой линии;

пропускать нижние выносные части букв;

менять цвет, толщину и стили;

переходить на новую строку;

работать с любыми фонами.

Я считаю, что мы вполне можем требовать все это от подчеркиваний, однако насколько мне известно, не существует интуитивного способа для решения всех этих задач в CSS.

Подходы

Так какие способы есть в нашем распоряжении для подчеркивания текста? Я вспомнил следующие:

text-decoration;

background-image;

SVG фильтры;

Underline.js (canvas);

text-decoration-*

Пройдемся по всему списку и рассмотрим все плюсы и минусы каждого подхода.

Свойство text-decoration

Свойство text-decoration – самый простой способ подчеркивания текста. Нужно применить всего лишь одно свойство. На маленьком тексте такая линия будет смотреться нормально, но стоит увеличить размер шрифта и она уже смотрится неуклюже.

Самая большая проблема со свойством text-decoration – отсутствие кастомизации. Линия использует цвет и размер шрифта того текста, к которому применяется, и не существует кроссбраузерного способа изменения стилей. Чуть позже поговорим более подробно по этому свойству.

Плюсы

просто использовать;

располагается ниже базовой линии;

пропускает нижние выносные части букв по умолчанию в Safari и iOS;

перепрыгивает на новую строку;

работает с любыми фонами.

Минусы

не пропускает выносные нижние части букв в остальных браузерах;

нельзя менять цвет, толщину и стили.

Свойство border-bottom

Свойство border-bottom – хороший баланс скорости и кастомизации. Данный подход использует проверенные CSS рамки, а значит, вы с легкостью можете менять цвет, толщину и стили. Так выглядит свойство border-bottom на инлайновых элементах:

Самый большой минус – это то, насколько далеко подчеркивание расположено от текста. Подчеркивание расположено ниже нижних выносных частей букв. Данная проблема решается, если сделать элемент inline-block и уменьшить line-height, но тогда теряется возможность перепрыгивать на новые строки. Хорошо подходит для одиночных строк, но не более.

Кроме того, с помощью text-shadow можно скрыть части линии вокруг нижних выносок. В таком случае вам придется имитировать цвет фона, что означает, что метод работает только на однородных фонах. Градиенты и изображения не подойдут.

На данный момент существует 4 свойства для стилизации подчеркивания. Намного лучше, чем просто text-decoration.

Плюсы

можно использовать свойство transition и анимировать цвет и толщину;

перепрыгивает на новые строки по умолчанию, если элемент не inline-block;

Минусы

линия расположена очень далеко и ее сложно передвинуть;

слишком много лишних свойств нужно задействовать, чтобы подчеркивание хорошо смотрелось;

плохое выделение текста при использовании text-shadow.

Свойство box-shadow

Свойство box-shadow рисует подчеркивание с помощью двух внутренних теней: одна создает прямоугольник, а вторая прячет его. Это означает, что для правильной работы метода нужен однородный фон.

Такой же трюк с text-shadow можно использовать для имитации пропуска вокруг нижних выносок букв. Если цвет линии отличается от текста, или она достаточно тонкая, то проблем возникнуть не должно, как это бывает с text-decoration.

Плюсы

можно расположить под базовой линией;

можно пропускать выноски с помощью text-shadow;

можно менять цвет и толщину;

перепрыгивает на новые строки.

Минусы

нельзя менять стили;

не работает со всеми фонами.

Свойство background-image

Свойство background-image лучше всех решает наши задачи, и у него очень мало минусов. Идея заключается в том, что вы создаете изображение с помощью linear-gradient и background-position, которое повторяется по горизонтальной оси вдоль строк текста. Элемент должен быть display: inline;.

Демо ниже не использует linear-gradient. Для создания крутого эффекта, можете использовать свое изображение.

Плюсы

можно расположить ниже базовой линии;

можно пропускать нижние выноски с помощью text-shadow;

можно менять цвет, толщину (даже на полпикселя) и стили;

работает с пользовательскими изображениями;

перепрыгивает на новые строки;

работает с любым фоном, если не использовать text-shadow.

Минусы

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

SVG фильтры

Вот с этим методом я игрался. Вы можете создать инлайновый SVG элемент filter, который будет рисовать линию, и расширить текст, чтобы замаскировать те части линии, которые должны быть прозрачными. Фильтру можно присвоить id и ссылаться на него в CSS с помощью filter: url(‘#svg-underline’).

В чем тут плюс – фильтр добавляет прозрачность, не полагаясь на text-shadow. То есть вы можете пропускать нижние выноски букв на любом фоне, в том числе градиентах и изображениях! Пример ниже работает только с одной строкой текста, так что осторожнее.

А вот так это выглядит в Chrome и Firefox:

В IE, Edge и Safari с поддержкой возникают проблемы. В CSS сложно тестировать поддержку SVG фильтров. Можно использовать правило @supports на filter, но так вы проверите только работу самой ссылки, а не то, применился ли фильтр или нет. Мой способ довольно грубо работает с браузерами, так что будьте вдвойне осторожнее.

Плюсы

расположен ниже базовой линии;

пропускает нижние выноски;

можно менять цвет, толщину и стили;

работает на любом фоне.

Минусы

не перепрыгивает на новые строки;

не работает в IE, Edge и Safari, но можно в качестве фолбэка указать text-decoration. Подчеркивания в Safari сами по себе смотрятся здорово.

Underline.js (Canvas)

Underline.js – удивительная библиотека. Меня впечатляет, что Wenting Zhang смогли сделать с JS и вниманием к деталям. Если вы еще не видели техническое демо Underline.js, остановитесь на минутку и посмотрите. В сети есть замечательное девятиминутное выступление на тему принципов работы , я вам сейчас быстро его перескажу. Подчеркивания рисуются с помощью canvas. Совершенно новый подход, который на удивление хорошо работает.

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

Эту библиотеку стоит упомянуть только лишь, как доказательство концепции. У canvas есть потенциал для создания красивых, интерактивных подчеркиваний, но для правильной работы вам придется написать дополнительный JS код.

Свойства text-decoration-*

Помните, я сказал, что чуть позже мы более подробно разберем что-то? Сейчас этим и займемся. Свойство text-decoration работает хорошо само по себе, но мы можем добавить пару экспериментальных свойств для еще лучшего вида:

text-decoration-color

text-decoration-skip

text-decoration-style

Не радуйтесь раньше времени, вы же знаете о поддержке в браузерах.

Свойство text-decoration-color

Свойство text-decoration-color позволяет менять цвет подчеркивания отдельно от цвета текста. У свойства даже неплохая поддержка в браузерах. Оно работает в Firefox и с префиксом в Safari. Есть свой минус – если вы не очищаете линию вокруг выносок, в Safari она ложится поверх текста. Firefox:

Свойство text-decoration-skip

Свойство text-decoration-skip отвечает за пропуск нижних выносок в подчеркиваемом тексте.

Свойство нестандартное и на данный момент работает только в Safari. Для работы в других браузерах нужно использовать префикс –webkit-. В Safari это свойство включено по умолчанию, вот почему подчеркивания пропускают нижние выноски даже на сайтах, где это свойство не указано.

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

Свойство text-decoration-style

Свойство text-decoration-style предлагает тот же набор подчеркиваний, что и свойство border-style, но также добавляет новый вид – wavy. Возможные значения:

Прямо сейчас свойство text-decoration-style работает только в Firefox, ниже показан скриншот:

Набор однотонных подчеркиваний Выглядит похоже?

Что не так?

Свойства text-decoration-* более интуитивны по сравнению с другими свойствами для стилизации подчеркиваний. Однако если по-другому взглянуть на требования, которые мы предъявили ранее, то можно заметить, что с помощью этих свойств нельзя менять толщину и позицию. После небольшого изучения я нашел эти два свойства:

text-underline-width

text-underline-position

Похоже, эти свойства были выброшены из ранней версии CSS из-за отсутствия интереса к ним. Они так и не применялись. Эй, я в этом не виноват.

Выводы

Так как же лучше всего подчеркивать текст? Все зависит от разных факторов.

Для маленького текста я рекомендую использовать text-decoration и экспериментальное свойство text-decoration-skip, надеясь, что оно будет работать. В большинстве браузеров это смотрится так себе, но так было всегда, и люди не обращали на это внимание. Если вы достаточно терпеливы, есть шанс, что в скором времени все ваши подчеркивания будут хорошо смотреться, и вам ничего не придется менять.

Для основного текста используйте background-image. Метод работает, смотрится красиво, и для него есть Sass миксины. Если подчеркивание тонкое, или цвет отличается от текста, скорее всего, вы можете пропустить метод с text-shadow. Для текста на одной строке используйте border-bottom и любые другие свойства.

А для пропуска выносок букв на градиентных фонах или изображениях попробуйте использовать фильтра SVG. Или же просто не смешивайте такие фоны с подчеркиваниями. В будущем, когда улучшится поддержка в браузерах, можно будет использовать свойства text-decoration-*.

Позволяет сделать разное подчеркивание в HTML нижнее (underline), верхнее (overline), перечеркнутый текст (line-through) и т.п. Совместим эту фишку с предыдущей и получится:

Во второй строке показано как все записывается в один ряд с text-decoration.

text-decoration-style — стиль подчеркивания текста

Опция задает внешний вид декоративной линии для / ссылки. В новых рекомендациях CSS были добавлены значения wavy и double, теперь их всего 5:

• solid — сплошная линия;
• double — двойная (из первого примера выше);
• dotted — состоит из последовательности точек;
• dashed — позволяет сделать пунктирное подчеркивание CSS;
• wavy — эффектная волнистая линия.

text-underline-position — позиционирование CSS подчеркивания

С помощь этого свойства можно управлять позицией линии относительно глифа шрифта.
Всего доступны 4 варианта:

• auto — располагается максимально близко базовой линии текста;
• under — под самой нижней границей шрифта;
• left и right — слева/справа для записей, отображаемых вертикально.

Вот наглядное отличие нижнего подчеркивания текста с помощью under и auto:

Разница, думаю, вполне очевидна.

text-decoration-skip — убираем подчеркивание для элементов

С помощью опции можно отменить (пропустить) декорирование некоторых элементов в HTML строке. Чтобы лучше понять допустимые значения spaces, objects, box-decoration, edges, ink продублирую картинку из прошлой заметки:

То есть, например, с помощью ink вы можете сделать нижнее подчеркивание в CSS, которое бы не пересекалось с символами . Значение objects позволяет пропускать инлайновые элементы (inline-block) — вставляете span, и сплошная линия прервется в соответствующем месте:

Параметры box-decoration, spaces, edges намного хуже поддерживаются браузерами, поэтому их результат иногда отличается от ожидаемого. Вот состояние по совместимости/поддержке text-decoration на момент написания статьи:

Дополнительные фишки для подчеркивания ссылок

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

Как убрать подчеркивание ссылки

a:hover { text-decoration: underline; }

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

Если будут еще какие-то вопросы по теме, задавайте их в комментариях. Постараемся рассмотреть позже или подсказать в ответах. Главное в этом деле практика — попробуйте добавить разные свойства для опции text-decoration непосредственно в примерах или создайте свой тестовый файл. Надеемся по теме подчеркивания текста и ссылок в CSS / HTML все стало ясно.