在 css 中刪除下劃線的方法:使用 text-decoration: none;使用 border-bottom: 0;使用 a:link、a:visited 和 a:hover 偽類將 text-decoration 設(shè)置為 none;使用 outline: none;
如何在 CSS 中去掉下劃線
下劃線通常用于文本鏈接,但有時(shí)您可能希望在 CSS 中將其刪除。以下是實(shí)現(xiàn)此目的的方法:
1. 使用 text-decoration
屬性
text-decoration
屬性可以控制文本的裝飾,包括下劃線。要?jiǎng)h除下劃線,請(qǐng)將此屬性設(shè)置為 none
:
<code class="<a style='color:#f60; text-decoration:underline;' href=" https: target="_blank">css">a { text-decoration: none; }</code>
登錄后復(fù)制
2. 使用 border-bottom
屬性
border-bottom
屬性可以應(yīng)用到文本元素的底部邊框。將此屬性設(shè)置為 0
以刪除下劃線:
<code class="css">a { border-bottom: 0; }</code>
登錄后復(fù)制
3. 使用偽類
您還可以使用偽類專門針對(duì)鏈接元素刪除下劃線:
<code class="css">a:link { text-decoration: none; } a:visited { text-decoration: none; } a:hover { text-decoration: none; }</code>
登錄后復(fù)制
4. 使用 outline
屬性
outline
屬性可以控制元素周圍的邊框。將此屬性設(shè)置為 none
以刪除下劃線:
<code class="css">a { outline: none; }</code>
登錄后復(fù)制
注意:
第 1 種方法是通用方法,適用于所有文本元素。
第 2 和第 4 種方法具體針對(duì)鏈接元素。
第 3 種方法針對(duì)不同狀態(tài)的鏈接元素,例如未訪問的鏈接、已訪問的鏈接和鼠標(biāo)懸停在鏈接上的鏈接。