Wie kann ich die Länge und Position der Unterstreichung mithilfe von CSS-Verläufen anpassen?

Unterstreichungen gestalten: Länge und Position steuern

Unterstreichungen werden häufig zum Hervorheben von Text verwendet. Sie sind jedoch auf eine feste Länge und Position beschränkt, sodass der individuellen Anpassung Grenzen gesetzt sind. In diesem Leitfaden erfahren Sie, wie Sie die Länge und Position von Unterstreichungen mithilfe von CSS-Verläufen ändern.

Verläufe verwenden

Verläufe bieten eine flexible Möglichkeit, Unterstreichungen zu manipulieren. Durch die Verwendung eines Hintergrundverlaufs können Sie sowohl die Größe als auch die Position des unterstrichenen Teils anpassen.

.underline {
  background-image: linear-gradient(#5fca66 0 0);
  background-position: bottom center; /* Adjust position */
  background-size: 80% 2px; /* Control length and height */
  background-repeat: no-repeat;
  padding-bottom: 4px; /* Can also affect position */
}

Länge und Position anpassen

Durch Ändern der Hintergrundgröße Mit der Eigenschaft können Sie die Länge und Höhe der Unterstreichung steuern. Zum Beispiel:

.small {
  background-size: 50% 1px;
}

.big {
  background-size: 100% 3px;
}

Um die Unterstreichung neu zu positionieren, passen Sie die Eigenschaft „Hintergrundposition“ an. Zum Beispiel:

.left {
  background-position: bottom left;
}

.center-close {
  background-position: bottom 5px center;
}

.right {
  background-position: bottom right;
}

Zusätzliche Steuerelemente

Die Eigenschaft padding-bottom kann auch zur Feinabstimmung der Position der Unterstreichung verwendet werden, insbesondere wenn sie in Verbindung damit verwendet wird mit der Eigenschaft „background-position“.

.close {
  padding-bottom: 0;
  background-position: bottom 5px center;
}

.far {
  padding-bottom: 10px;
}

Beispiel

<span class="underline">This is a sentence</span>. I would like <span class="underline close">some words to have</span> longer <span class="underline left">underlines</span> than others. I would <span class="underline big center-close">also like</span> to be able to change the <span class="underline small right">position</span> of the <span class="underline big">underline</span>(to
<span class="underline far">be centered under the word, for example</span>).

Dieses Beispiel zeigt die verschiedenen Längen- und Positionsanpassungen, die durch CSS-Verläufe möglich sind.

Das obige ist der detaillierte Inhalt vonWie kann ich die Länge und Position der Unterstreichung mithilfe von CSS-Verläufen anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!