Heim > Artikel > Web-Frontend > So verdicken Sie die Zeile unter dem a-Tag in CSS
So verdicken Sie die Zeile unter dem a-Tag in CSS
- WBOYOriginal
- 2021-12-08 10:55:504872Durchsuche
In CSS können Sie das Attribut „border-bottom“ und das Attribut „text-decoration“ verwenden, um die Linie unter dem a-Tag dicker zu machen. Die Syntax lautet „a{text-decoration:none;border-bottom: Linienstärke“. Wert einfarbig Farbwert;}".
Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.
So verdicken Sie die Linie unter dem a-Tag in CSS
In CSS können Sie das Attribut „border-bottom“ und das Attribut „text-decoration“ verwenden, um die Linie unter dem a-Tag dicker zu machen,
text-decoration Attribut Um dem Text hinzugefügte Änderungen anzugeben, wird das Attribut „border-bottom“ verwendet, um den unteren Randstil des Elements festzulegen. Daher können wir zunächst die ursprüngliche Unterstreichung des a-Tags entfernen und den unteren Rand des a-Tag-Elements als verwenden die Linie unter dem a-Tag. Auf diese Weise müssen Sie nur den Dickenwert des Rahmens unter dem a-Tag festlegen.
Das Beispiel sieht wie folgt aus:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
a{
color:red;
border-bottom:5px solid red;
text-decoration:none; }
</style>
</head>
<body>
<a href="">这是一个a标签</a>
</body>
</html>Ausgabeergebnis:
(Lernvideo-Sharing: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonSo verdicken Sie die Zeile unter dem a-Tag in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
In Verbindung stehende Artikel
Mehr sehen- Welcher Code ist im CSS-Klick versteckt?
- So erzielen Sie den Effekt des Anzeigens und Ausblendens von Divs, wenn die Maus in CSS3 auf Divs bewegt wird
- So stellen Sie die Elementebene in CSS auf die höchste Stufe
- So ändern Sie mit CSS den Bildeffekt, wenn die Maus darüber fährt
- So implementieren Sie eine Übersetzungstransformation in CSS