CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSを使用してアクティブリンクの周りの点線を削除する

アクティブ/フォーカスされたリンクのCSSアウトラインプロパティをnoneと宣言することで、アクティブまたはフォーカスされたときに自分の周りに点線のアウトラインを表示するハイパーリンクのデフォルトの動作を削除できます。

ソリューション

a, a:active, a:focus {
   outline: none;
}

例

例を使用して、アクティブなリンクの周りの点線を削除する方法を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<title>Remove dotted line around links using css</title>
</head>
<style>
div {
   color: #000;
   padding:20px;
   background-image: linear-gradient(135deg, #dc3545 0%, #9599E2 100%);
   text-align: center;
}
a, a:active, a:focus {
   outline: none;
}
</style>
<body>
<div>
<h1>HTML Links Demo</h1>
<a href="https://google.com" target="_blank">Go To Google</a>
</div>
</body>
</html>

出力

上記のコードの出力は次のとおりです-

ソリューションを適用する前に

CSSを使用してアクティブリンクの周りの点線を削除する

ソリューションを適用した後

CSSを使用してアクティブリンクの周りの点線を削除する


  1. CSSを使用したリンクの色の設定

    CSSを使用すると、リンクに色を付けることができます。 colorプロパティは、要素のテキストの色を設定するために使用されます。 疑似セレクターの順序は、次のように指定されます。-：link、：visited、：hover、：active。 構文 CSSカラープロパティの構文は次のとおりです- Selector {    color: /*value*/ } 例 次の例は、CSSカラープロパティ-を示しています。 <!DOCTYPE html> <html> <head> <style> #demo::after { &

  2. CSSを使用してリンクからデフォルトの下線を削除する

    デフォルトでは、HTMLのすべてのリンクは下線で装飾されています。この下線は、CSStext-decorationプロパティを使用して削除できます。 構文 CSStext-decorationプロパティの構文は次のとおりです- Selector {    text-decoration: /*value*/ } 例 次の例は、CSSのテキスト装飾プロパティを示しています。 <!DOCTYPE html> <html> <head> <style> p {    padding: 5px;