Edit ketebalan garis atribut 'garis bawah' CSS

Karena Anda dapat menggarisbawahi teks apa pun di CSS seperti ini:

H4 {text-decoration: underline;}

Bagaimana Anda juga bisa mengedit 'garis' yang digambar, warna yang Anda dapatkan pada garis dengan mudah ditentukan sebagai 'color: red' tetapi bagaimana cara mengedit ketinggian garis, yaitu ketebalan?

Inilah salah satu cara untuk mencapai ini:

HTML:

<h4>This is a heading</h4>

<h4><u>This is another heading</u></h4>

CSS:

 u {
    text-decoration: none;
    border-bottom: 10px solid black;
  }​

Berikut ini contohnya: http://jsfiddle.net/AQ9rL/

Baru-baru ini saya harus berurusan dengan FF yang garis bawahnya terlalu tebal dan terlalu jauh dari teks di FF, dan menemukan cara yang lebih baik untuk menghadapinya dengan menggunakan sepasang bayangan kotak:

.custom-underline{
    box-shadow: inset 0 0px 0 white, inset 0 -1px 0 black
}

Bayangan pertama diletakkan di atas bayangan kedua dan begitulah cara Anda mengontrol bayangan kedua dengan memvariasikan nilai 'px' dari keduanya.

Plus: berbagai warna, ketebalan dan posisi garis bawah

Minus: tidak dapat digunakan pada background non-solid

Di sini saya membuat beberapa contoh: http://jsfiddle.net/xsL6rktx/

Sangat mudah ... di luar elemen "span" dengan font kecil dan garis bawah, dan di dalam elemen "font" dengan ukuran font lebih besar.

<span style="font-size:1em;text-decoration:underline;">
 <span style="font-size:1.5em;">
   Text with big font size and thin underline
 </span>
</span>

Cara lain untuk melakukannya adalah dengan menggunakan ": after" (pseudo-element) pada elemen yang ingin Anda garis bawahi.

h2{
  position:relative;
  display:inline-block;
  font-weight:700;
  font-family:arial,sans-serif;
  text-transform:uppercase;
  font-size:3em;
}
h2:after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  right:0;
  margin:auto;
  background:#000;
  height:1px;

}

Saat ini text-decoration-thicknessada bagian dari Modul Dekorasi Teks CSS Level 4 . Ada di tahap "Draf Editor" - jadi ini adalah pekerjaan yang sedang dalam proses dan dapat berubah. Mulai Januari 2020, ini hanya didukung di Firefox dan Safari .

Properti teks-dekorasi-ketebalan CSS menetapkan ketebalan, atau lebar, garis dekorasi yang digunakan pada teks dalam elemen, seperti garis-tayang, garis bawah, atau garis atas.

a {
  text-decoration-thickness: 2px;
}

Codepen: https://codepen.io/mrotaru/pen/yLyLOgr (khusus Firefox)

Ada juga text-decoration-coloryang merupakan bagian dari CSS Text Decoration Module Level 3 . Ini lebih matang (Rekomendasi Kandidat) dan didukung di sebagian besar browser utama (pengecualian adalah Edge dan IE). Tentu saja ini tidak dapat digunakan untuk mengubah ketebalan garis, tetapi dapat digunakan untuk mendapatkan garis bawah yang lebih "diredam" (juga ditampilkan di codepen).

Saya akan melakukan sesuatu yang sederhana seperti:

.thickness-underline {
    display: inline-block;
    text-decoration: none;
    border-bottom: 1px solid black;
    margin-bottom: -1px;
}

• Anda dapat menggunakan line-heightatau padding-bottommengatur kepemilikan di antara mereka
• Anda dapat menggunakan display: inlinedalam beberapa kasus

Demo: http://jsfiddle.net/5580pqe8/

The background-imagejuga dapat digunakan untuk membuat garis bawah.

Itu harus digeser ke bawah background-positiondan diulangi secara horizontal. Lebar garis dapat disesuaikan sampai tingkat tertentu menggunakan background-size(latar belakang dibatasi pada kotak konten elemen).

.underline
{
    --color: green;
    font-size: 40px;
    background-image: linear-gradient(var(--color) 0%, var(--color) 100%);
    background-repeat: repeat-x;
    background-position: 0 1.05em;
    background-size: 2px 5px;
}

<span class="underline">
     Underlined<br/>
     Text
</span>

a {
  text-decoration: none;
  position: relative;
}

a.underline {
  text-decoration: underline;
}

a.shadow {
   box-shadow: inset 0 -4px 0 white, inset 0 -4.5px 0 blue;
}

<h1><a href="#" class="underline">Default: some text alpha gamma<br>the quick brown fox</a></h1>
<p>Working:</p>
<h1><a href="#" class="shadow">Using Shadow: some text alpha gamma<br>the quick brown fox<br>even works with<br>multiple lines</a></h1>
<br>

Solusi Akhir: http://codepen.io/vikrant-icd/pen/gwNqoM

a.shadow {
   box-shadow: inset 0 -4px 0 white, inset 0 -4.5px 0 blue;
}

Berkat keajaiban opsi css baru , ini sekarang dimungkinkan secara native:

a {
  text-decoration: underline;
  text-decoration-thickness: 5px;
  text-decoration-skip-ink: auto;
  text-underline-offset: 3px;
}

Sampai saat ini dukungannya relatif buruk . Tapi itu akan mendarat di browser lain selain ff pada akhirnya.

Solusi Saya: https://codepen.io/SOLESHOE/pen/QqJXYj

{
    display: inline-block;
    border-bottom: 1px solid;
    padding-bottom: 0;
    line-height: 70%;
}

Anda dapat mengatur posisi garis bawah dengan nilai ketinggian garis, ketebalan garis bawah, dan gaya garis batas bawah.

Berhati-hatilah untuk menonaktifkan perilaku garis bawah default jika Anda ingin menggarisbawahi sebuah href.