ホームページ > 記事 > ウェブフロントエンド > HTMLタグのタイトルスタイルをCSSで変更するにはどうすればよいですか? (コード例)
HTMLタグのタイトルスタイルをCSSで変更するにはどうすればよいですか? (コード例)
- 青灯夜游転載
- 2021-02-19 10:00:157414ブラウズ
[推奨チュートリアル: CSS ビデオ チュートリアル ]
ツールチップを実装するための純粋な CSS、HTML タグのタイトル スタイルを CSS で変更する [著者時間があれば更新します。 いくつかの境界条件。現在のスタイルは、極端な場合に問題があります。コードをオンライン環境に直接コピーしないでください。これは作成者によって書かれた単なる小さなデモです]
html コード:
次のコードは直接利用でき、トゥーチップのスタイルは自分でデバッグできます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box {
display: flex;
justify-content: center;
align-items: center;
}
span {
position: relative;
margin: 50px auto;
border: 1px solid;
}
span[aria-label]:hover:after {
content: attr(aria-label);
position: absolute;
bottom: -30px;
left: 0;
border: 1px solid;
width: 100%;
}
</style>
</head>
<body>
<div class="box">
<span aria-label="我是tooltip">我是主体内容啊</span>
</div>
</body>
</html>プログラミング関連の知識について詳しくは、プログラミング教育をご覧ください。 ！
以上がHTMLタグのタイトルスタイルをCSSで変更するにはどうすればよいですか? (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事はcsdn.netで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
前の記事：CSS IDセレクターの書き方次の記事：CSS IDセレクターの書き方