CSS "alt çizgi" özelliğinin çizgi kalınlığını düzenleyin

CSS'deki herhangi bir metnin altını şu şekilde çizebileceğiniz için:

H4 {text-decoration: underline;}

O zaman çizilen o 'çizgiyi' nasıl düzenleyebilirsiniz, çizgi üzerinde elde ettiğiniz renk kolayca 'renk: kırmızı' olarak belirlenir, ancak çizginin yüksekliği, yani kalınlık nasıl düzenlenir?

İşte bunu başarmanın bir yolu:

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;
  }​

İşte bir örnek: http://jsfiddle.net/AQ9rL/

Son zamanlarda, FF'deki metinden çok kalın ve altını çizen FF ile uğraşmak zorunda kaldım ve bir çift kutu gölgesi kullanarak bununla başa çıkmanın daha iyi bir yolunu buldum:

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

İlk gölge ikincinin üzerine yerleştirilir ve bu, her ikisinin de 'px' değerini değiştirerek ikincisini kontrol edebilirsiniz.

Artı: çeşitli renkler, kalınlık ve alt çizgi konumu

Eksi: düz olmayan arka planlarda kullanılamaz

Burada birkaç örnek yaptım: http://jsfiddle.net/xsL6rktx/

Çok kolay ... küçük yazı tipi ve altı çizili dış "yayılma" öğesi ve içinde daha büyük yazı tipi boyutu olan "yazı tipi" öğesi.

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

Bunu yapmanın başka bir yolu, altını çizmek istediğiniz öğede ": after" (sözde öğe) kullanmaktır.

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;

}

Şu text-decoration-thicknessanda CSS Metin Dekorasyon Modülü Seviye 4'ün bir parçası var . "Editörün Taslağı" aşamasında - yani devam eden bir çalışmadır ve değişebilir. Ocak 2020 itibariyle yalnızca Firefox ve Safari'de desteklenmektedir .

Metin süsleme kalınlığı CSS özelliği, çizgi, alt çizgi veya üst çizgi gibi bir öğedeki metinde kullanılan dekorasyon çizgisinin kalınlığını veya genişliğini ayarlar.

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

Codepen: https://codepen.io/mrotaru/pen/yLyLOgr (yalnızca Firefox)

CSS Metin Dekorasyon Modülü Seviye 3'ün birtext-decoration-color parçası olan da var . Bu daha olgundur (Aday Öneri) ve çoğu büyük tarayıcıda desteklenir (istisnalar Edge ve IE'dir). Kuşkusuz, çizginin kalınlığını değiştirmek için kullanılamaz, ancak daha "sessiz" bir alt çizgi elde etmek için kullanılabilir (kod kaleminde de gösterilmiştir).

Şunun gibi basit bir şey yapacağım:

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

• Sen kullanabilirsiniz line-heightveyapadding-bottomAralarında bir olasılık ayarlamak
• display: inlineBazı durumlarda kullanabilirsiniz

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

background-imageAynı zamanda bir alt çizgi oluşturmak için kullanılabilir.

background-positionYatay olarak aşağı kaydırılmalı ve tekrarlanmalıdır. Çizgi genişliği kullanılarak bir dereceye kadar ayarlanabilir background-size(arka plan, öğenin içerik kutusuyla sınırlıdır).

.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>

Nihai Çözüm: http://codepen.io/vikrant-icd/pen/gwNqoM

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

Yeni css seçeneklerinin büyüsü sayesinde bu artık yerel olarak mümkündür:

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

Henüz destek görece zayıf . Ama sonunda ff'den başka tarayıcılara inecek.

Çözümüm: https://codepen.io/SOLESHOE/pen/QqJXYj

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

Alt çizgi konumunu çizgi yüksekliği değeri, alt çizgi kalınlığı ve kenarlık alt ile stil ile ayarlayabilirsiniz.

Bir href'in altını çizmek istiyorsanız, varsayılan alt çizgi davranışını devre dışı bırakmaya dikkat edin.