Bearbeiten Sie die Linienstärke des CSS-Attributs "Unterstreichen"

Da Sie jeden Text in CSS wie folgt unterstreichen können:

H4 {text-decoration: underline;}

Wie können Sie dann auch die gezeichnete 'Linie' bearbeiten, die Farbe, die Sie auf der Linie erhalten, kann leicht als 'Farbe: Rot' angegeben werden, aber wie bearbeitet man die Höhe der Linie, dh die Dicke?

Hier ist eine Möglichkeit, dies zu erreichen:

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

Hier ist ein Beispiel: http://jsfiddle.net/AQ9rL/

Vor kurzem musste ich mich mit FF befassen, dessen Unterstreichungen zu dick und zu weit vom Text in FF entfernt waren, und fand einen besseren Weg, um mit zwei Kastenschatten damit umzugehen:

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

Der erste Schatten wird auf den zweiten gelegt, und so können Sie den zweiten steuern, indem Sie den 'px'-Wert von beiden variieren.

Plus: verschiedene Farben, Dicke und Unterstreichungsposition

Minus: Kann nicht auf nicht festen Hintergründen verwendet werden

Hier habe ich einige Beispiele gemacht: http://jsfiddle.net/xsL6rktx/

Sehr einfach ... außerhalb des "span" -Elements mit kleiner Schrift und Unterstreichung und innerhalb des "font" -Elements mit größerer Schriftgröße.

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

Eine andere Möglichkeit, dies zu tun, ist die Verwendung von ": after" (Pseudoelement) für das Element, das Sie unterstreichen möchten.

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;

}

Es ist text-decoration-thicknessderzeit Teil der CSS Text Dekoration des Moduls 4 . Es befindet sich in der Phase "Editor's Draft" - es ist also in Arbeit und kann sich ändern. Ab Januar 2020 wird es nur in Firefox und Safari unterstützt .

Die CSS-Eigenschaft Textdekorationsdicke legt die Dicke oder Breite der Dekorationslinie fest, die für Text in einem Element verwendet wird, z. B. eine Linie durch, eine Unterstreichung oder eine Überstreichung.

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

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

Es gibt auch einen text-decoration-colorTeil des CSS Text Decoration Module Level 3 . Dies ist ausgereifter (Kandidatenempfehlung) und wird in den meisten gängigen Browsern unterstützt (Ausnahmen sind Edge und IE). Natürlich kann es nicht verwendet werden, um die Dicke der Linie zu ändern, aber es kann verwendet werden, um eine "gedämpfte" Unterstreichung zu erzielen (auch im Codepen gezeigt).

Ich werde etwas Einfaches tun wie:

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

• Sie können line-heightoder verwenden padding-bottom, um Besitz zwischen ihnen zu setzen
• Sie können display: inlinein einigen Fällen verwenden

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

Mit background-imagekann auch eine Unterstreichung erstellt werden.

Es muss über nach unten verschoben background-positionund horizontal wiederholt werden. Die Linienbreite kann mit bis zu einem gewissen Grad angepasst werden background-size(der Hintergrund ist auf das Inhaltsfeld des Elements beschränkt).

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

Endgültige Lösung: http://codepen.io/vikrant-icd/pen/gwNqoM

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

Meine Lösung: https://codepen.io/SOLESHOE/pen/QqJXYj

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

Sie können die Unterstreichungsposition mit dem Wert für die Zeilenhöhe, die Dicke der Unterstreichung und den Stil mit dem unteren Rand anpassen.

Achten Sie darauf, das Standard-Unterstreichungsverhalten zu deaktivieren, wenn Sie eine href unterstreichen möchten.

Dank der Magie der neuen CSS-Optionen ist dies jetzt nativ möglich:

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

Bisher ist die Unterstützung relativ schlecht . Aber es wird irgendwann in anderen Browsern als ff landen.