Edit Linienstärke von CSS 'unterstreichen' - Attribut

Da kann man unterstreichen, text in CSS etwa so:

H4 {text-decoration: underline;}

Wie können Sie auch dann Bearbeiten, dass die 'Linie', das ist gezeichnet, die Farbe, die Sie erhalten, auf der Linie ist leicht angegeben 'color: red' aber wie kann man die Bearbeiten Sie die Höhe der Zeile, also die Dicke?

h4 {border-bottom: 10px solid #000;}
Schön! Das ist brilliant, ich danke Ihnen sehr. Wie kann ich die Breite dieser Grenze 'auto' ist nun aber so, dass es nur die Grenzen der H4-tag und nicht die gesamte Breite des enthaltenden div-Element?
Sie können hinzufügen display:inline-block um sicherzustellen, dass die Breite festgelegt ist, Jedoch mit einem element innerhalb <h4> und styling innen besser wäre. Überprüfen Sie meine Antwort unten.
stimmt auch wieder!! Du bist wie ein CSS-ninja. Danke Mann. Ich habe diese Antwort Gaben Sie in den Kommentar, anstatt Ihre Antwort unten geschrieben. Dieser Weg ist denke ich besser, da Sie nicht brauchen, um wickeln Sie Ihren text in ein anderes <u> - tag. Sie vollständige Kontrolle über das von der CSS-Seite.
mögliche Duplikate von Dicke unterstreichen

InformationsquelleAutor | 2012-12-12

css html

82

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/
- Es sei denn, Sie haben Links oder rechts, Polsterung :/
- ...oder mehrere Zeilen von text
- In diesem Fall müssen Sie wickeln Sie den text aus jeder Zeile, vor und nach dem Zeilenumbruch mit <span> und anwenden border-bottom drin. Es ist eine Problemumgehung, könnte das schmerzhaft werden in nicht-fest programmierte Szenarien allerdings.
InformationsquelleAutor Pranav 웃
44

Vor kurzem habe ich zu tun gehabt mit FF unterstreicht die waren zu dick und zu weit vom text im FF, und einen besseren Weg gefunden, damit umzugehen mit einem paar box-Schatten:
```
.custom-underline{
    box-shadow: inset 0 0px 0 white, inset 0 -1px 0 black
}
```
Erste Schatten ist auf der Oberseite des zweiten, und das ist, wie Sie Steuern können, die zweite durch die Variation des 'px' Wert von beiden.

Plus: verschiedene Farben, Stärke und unterstreichen die position

Minus: kann nicht auf nicht-solide Hintergründe

Hier machte ich einige Beispiele:
http://jsfiddle.net/xsL6rktx/
- Wie ordentlich. Ein pro (für mich wenigstens) für diese in Bezug auf border-bottom ist, dass die "Linie" Stärke wächst gegenüber dem text, wodurch der Abstand zwischen text und Linie weniger große.
- Ich bekomme die Hälfte pixel vertikale Linien, die zusätzlich zu unterstreichen -, wenn dies zu tun.
- Wie es scheint, wurde an einer Stelle eine perfekte Antwort, aber ich bekomme sehr sehr dünnen, vertikalen Linien auf jeder Seite des Elements in Chrom 66
- Anstelle von weiß, mit transparente wäre in jedem Fall der hintergrund.
InformationsquelleAutor anvar
14

Sehr einfach ... außerhalb "span" - element mit kleiner Schrift und Unterstrichen, und innerhalb der "font" - element mit größerer Schrift.

HTML:
```
<span style="font-size:1em;text-decoration:underline;">
 <span style="font-size:1.5em;">
   Text with big font size and thin underline
 </span>
</span>
```
- Warten....was? Sie verwendet eine <font> tag? Warum würden Sie das tun?
- Wenn Sie ersetzen die veralteten <font> tag mit einem span tag, dies wäre die einzige Antwort, die tatsächlich auf die Frage eingegangen.
- Und das funktioniert nicht.
- Funktioniert nicht in Chrome und Safari
- Funktioniert es immer noch nicht für Chrome.
InformationsquelleAutor user4378029

Einen anderen Weg, dies zu tun ist mit ":after" (pseudo-element) auf 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;

}

Nicht arbeiten mit mehreren Zeilen text...

InformationsquelleAutor Patrick

8

Ich werde etwas tun, so einfach ist :
```
.thickness-underline {
    display: inline-block;
    text-decoration: none;
    border-bottom: 1px solid black;
    margin-bottom: -1px;
}
```
- Können Sie line-height oder padding-bottom einstellen Position zwischen Ihnen
- Können Sie display: inline in einigen Fällen
Demo : http://jsfiddle.net/5580pqe8/
- Leider, margin-bottom, nicht auf negative Werte.
- Das ist falsch, können Sie haben negative margin auf der Unterseite ein element.
InformationsquelleAutor l2aelba

Den background-image können auch verwendet werden, um eine Unterstreichung.

Muss es verschoben werden, bis über background-position und horizontal wiederholt. Die Linienbreite kann angepasst werden, um einige Grad mit background-size(der hintergrund beschränkt sich auf das Feld Inhalt des Elements).

CSS:

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

HTML:

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

InformationsquelleAutor H.B.

4

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;
}
```
InformationsquelleAutor viCky
1

Meine Lösung :
https://codepen.io/SOLESHOE/pen/QqJXYj
```
{
    display: inline-block;
    border-bottom: 1px solid;
    padding-bottom: 0;
    line-height: 70%;
}
```
Können Sie einstellen, unterstreichen die position mit der line-height Wert, unterstreichen die Dicke und den Stil mit border-bottom.

Vorsicht zu deaktivieren Standard unterstreichen Verhalten, wenn Sie unterstreichen möchten ein href.
- Aber nicht mit mehrzeiliger text...
InformationsquelleAutor soleshoe

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.