Zenn
📝

CSSでリンクの一部にだけ下線を出す方法

2023/02/14に公開
CSS
tech

こんな感じにスタイルを当てると、一部だけ下線が出るようにできます。

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