📝
CSSでリンクの一部にだけ下線を出す方法
こんな感じにスタイルを当てると、一部だけ下線が出るようにできます。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8" />
<link href="styles.css" />
</head>
<body>
<a class="link" href="#">
ここには下線が出ない
<span class="underline">ここに下線が出る</span>
</a>
</body>
</html>
styles.css
.link {
text-decoration: none;
}
.link:hover .underline {
text-decoration: underline;
}
ホバーしてみると、うまく動いてることを確認できました。
Discussion