HTML href要素のタイトルテキストの位置と色を制御する方法は？

Question

JSを使用しないでHTMLとCSSを使用すると、リンクが上に乗ったときに表示されるタイトルテキストの位置、テキストの色、および背景色を変更するにはどうすればよいですか？リンクテキストの中間点の下にタイトルテキストを配置したいと思います。

a:link {text-decoration: none; 
 
color: #000; 
 
border-bottom: 2px solid #f00; } 
 

 
a:hover, a:active 
 
{text-decoration: none; 
 
color: #f00; 
 
border-bottom: 2px solid #f00; } 
 

 
a:visited {text-decoration: none; 
 
color: black; 
 
border-bottom: 2px solid #888; }

<div> 
 
<a href="#" title="hello">text</a> 
 
</div>

Answer 1

UPDATE

ついにOPがソリューションは、もともとそのため、一つの例外、titleのデフォルトの動作が抑制されていない属性で正常に動作していることである何を意味するのかを考え出す後カスタマイズされたツールチップの後に追加のツールチップが表示されます。

この解決策は次のとおりです。title属性を使用しない JavaScriptを使用しないと、CSSで制御できない多くのデフォルト動作が犠牲になります。しかし、有効でセマンティックである（正しく表示されていれば）機能的にも柔軟性がある代替手段があるため、落胆しないでください。

data-*属性使用します（= *下のキャップ内の任意の文字列スペースなし - 。代わりにを使用ダッシュ）を

• 我々は、任意の長さ
• で任意の文字列を使用することができます私たちはそれを私たちが望むものにすることができます（前述の制限内で）
• 要素上の属性...
• ...その要素は任意の要素とすることができます。

以下のスニペットでは、最後の2つの例を参照してください。

---

attr()

値::before and ::after擬似要素を使用します。 titleに限らず、下記のスニペットをご覧ください。

SNIPPET

div { 
 
    margin: 50px; 
 
    position: relative; 
 
} 
 
a:link { 
 
    text-decoration: none; 
 
    color: #000; 
 
    border-bottom: 2px solid #f00; 
 
} 
 
a:visited { 
 
    text-decoration: none; 
 
    color: black; 
 
    border-bottom: 2px solid #888; 
 
} 
 
a:hover, 
 
a:active { 
 
    text-decoration: none; 
 
    color: #f00; 
 
    border-bottom: 2px solid #f00; 
 
} 
 
a:hover::after { 
 
    content: attr(title); 
 
    color: blue; 
 
    position: absolute; 
 
    top: 3ex; 
 
    left: -.5ch; 
 
    border-bottom: 0 none transparent; 
 
} 
 
a[name]:hover::after { 
 
    content: attr(href); 
 
    background: black; 
 
    color: cyan; 
 
    border-bottom: 0 none transparent; 
 
} 
 
a[target]:hover::after { 
 
    content: attr(target); 
 
    left: -1.5ch; 
 
    background: red; 
 
    color: white; 
 
    border-bottom: 0 none transparent; 
 
} 
 
a[data-node]:hover::after { 
 
    content: attr(data-node); 
 
    left: -4ch; 
 
    border-bottom: 0 none transparent; 
 
    background: black; 
 
    color: gold; 
 
} 
 
a[data-anything]:hover::after { 
 
    content: attr(data-anything); 
 
    left: 0; 
 
    border-bottom: 0 none transparent; 
 
    color: purple; 
 
    width: 8ch; 
 
}

<div> 
 
    <a href="#" title="hello">text</a> 
 
</div> 
 

 

 
<div> 
 
    <a href="#" title="world!">text</a> 
 
</div> 
 

 

 
<div> 
 
    <a href="h++p://nowhere.lost" name='destination'>Where do I go to?</a> 
 
</div> 
 

 
<div> 
 
    <a href="#" target="#anchorPoint">Target</a> 
 
</div> 
 

 
<div> 
 
    <a href="#" data-node="anyArbitraryString">Data-*</a> 
 
</div> 
 

 
<div> 
 
    <a href="#" data-anything="For anything you want represented by a string">Use Data-*</a> 
 
</div>