Edytuj grubość linii atrybutu „podkreślenie” CSS

Ponieważ możesz podkreślić dowolny tekst w CSS w ten sposób:

H4 {text-decoration: underline;}

Jak możesz następnie edytować tę narysowaną „linię”, kolor, który uzyskasz na linii, można łatwo określić jako „kolor: czerwony”, ale jak można edytować wysokość linii, tj. Grubość?

Oto jeden ze sposobów osiągnięcia tego:

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

Oto przykład: http://jsfiddle.net/AQ9rL/

Ostatnio miałem do czynienia z FF, które podkreślenia były zbyt grube i zbyt oddalone od tekstu w FF, i znalazłem lepszy sposób radzenia sobie z tym za pomocą pary box-shadows:

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

Pierwszy cień jest nakładany na drugi i w ten sposób możesz kontrolować drugi, zmieniając wartość „px” obu.

Plus: różne kolory, grubość i położenie podkreślenia

Minus: nie można używać na niestabilnym tle

Tutaj zrobiłem kilka przykładów: http://jsfiddle.net/xsL6rktx/

Bardzo proste ... zewnętrzny element „span” z małą czcionką i podkreśleniem, a wewnątrz element „font” z większym rozmiarem czcionki.

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

Innym sposobem jest użycie ": after" (pseudoelement) na elemencie, który chcesz podkreślić.

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;

}

Obecnie text-decoration-thicknessistnieje część modułu dekoracji tekstu CSS na poziomie 4 . Jest na etapie „Redakcji” - więc jest w toku i może ulec zmianie. Od stycznia 2020 r . Jest obsługiwany tylko w przeglądarkach Firefox i Safari .

Właściwość CSS text-decoration-Thick określa grubość lub szerokość linii dekoracyjnej używanej w tekście w elemencie, na przykład przekreślenie, podkreślenie lub nadkreślenie.

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

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

Jest też text-decoration-color, który jest częścią modułu dekoracji tekstu CSS na poziomie 3 . Jest to bardziej dojrzałe (rekomendacja kandydata) i obsługiwane w większości głównych przeglądarek (wyjątkami są Edge i IE). Oczywiście nie można go użyć do zmiany grubości linii, ale można go użyć do uzyskania bardziej „wyciszonego” podkreślenia (również pokazanego w polu kodowym).

Zrobię coś prostego jak:

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

• Możesz użyć line-heightlub, padding-bottomaby ustawić pozycję między nimi
• Możesz użyć display: inlinew niektórych przypadkach

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

background-imageMogą być również wykorzystywane do tworzenia podkreślenie.

Należy go przesunąć w dół za pomocą background-positioni powtórzyć poziomo. Szerokość linii można do pewnego stopnia dostosować za pomocą background-size(tło jest ograniczone do pola treści elementu).

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

Ostateczne rozwiązanie: http://codepen.io/vikrant-icd/pen/gwNqoM

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

Dzięki magii nowych opcji CSS jest to teraz możliwe natywnie:

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

Jak dotąd wsparcie jest stosunkowo słabe . Ale ostatecznie wyląduje w innych przeglądarkach niż ff.

Moje rozwiązanie: https://codepen.io/SOLESHOE/pen/QqJXYj

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

Możesz dostosować położenie podkreślenia za pomocą wartości wysokości linii, grubości podkreślenia i stylu za pomocą border-bottom.

Uważaj, aby wyłączyć domyślne zachowanie podkreślenia, jeśli chcesz podkreślić href.