CSSでホバー時に下線を引き、文字の色も変えたい。

マウスでホバー時にリンクの文字の色と下線を引きたいのですがうまくいきません。
ホバー時にtransitionでゆっくり色を変えて下線も出現させようとしたのですが、文字の色だけ変わり下線が出現しません。どこを改善すればよいのでしょうか。

.navbar .menu li{
  display: inline-block;
  list-style: none;
}
.navbar .menu li a{
  color: white;
  font-size: 18px;
  margin-left: 25px;
  transition: color 0.3s ease;
}

/* ここから下線追加 */
.navbar .menu li a:hover{
  color: crimson;
  position: relative;
}
.navbar .menu li a::after{
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  background: crimson;
  width: 0px;
  transition: all 0.3s ease;
}
.navbar .menu li a:hover::after{
  width: 100%;
}

HTMLのコードも載せておきます。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio1</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <!-- Navigate section start -->
    <nav class="navbar">
      <div class="max-width">
        <div class="logo"><a href="#">Portfo<span>lio.</span></a></div>
        <ul class="menu">
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Skills</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
    </nav>
  </body>
</html>

m.ts10806

2021/03/01 14:59

CSSフレームワークは本件とどう関係するのでしょうか

program

2021/03/02 06:08

すみません。似たような動作をするBootstrapのようなコードをご存じなら教えてほしいな、と軽い気持ちでタグの候補をクリックしていました。

m.ts10806

2021/03/02 06:23

それはもはやBootstrap入れましょうという話になるので、直接の関連性がない（または文章で明記しない）のでしたら外しましょう

program

2021/03/02 06:27

承知いたしました。以後気を付けます。

行動規範の内容に同意します

回答1件

ベストアンサー

補足: 消すときにも下線をアニメーションしたいとのことなので。

デフォルトでリンクの文字に付く下線をtext-decoration: none;で削除しておく。
通常のリンクの表示にposition: relative;を追加。
通常のリンクの表示にtransition~~は不要~~を付ける→ホバーが外れたときの文字の表示用。
ホバー時のリンクの表示にtransitionを追加。
通常のリンクの::after疑似要素にはtransition~~は不要~~を付ける→ホバーが外れたときの下線の表示用。
通常のリンクの::after疑似要素にheightを指定して、下線(風に表示する矩形)の高さを設定する。
ホバー時のリンクの::after疑似要素にtransitionを追加。

CSS
1.navbar .menu li {
2    display: inline-block;
3    list-style: none;
4}
5
6.navbar .menu li a {
7    color: white;
8    font-size: 18px;
9    margin-left: 25px;
10    text-decoration: none;
11    position: relative;
12    transition: all 0.3s ease;
13}
14
15.navbar .menu li a:hover {
16    color: crimson;
17    position: relative;
18    transition: all 0.3s ease;
19}
20
21.navbar .menu li a::after {
22    content: "";
23    position: absolute;
24    bottom: -5px;
25    left: 0;
26    background: crimson;
27    width: 0;
28    height: 1px;
29    transition: all 0.3s ease;
30}
31
32.navbar .menu li a:hover::after {
33    width: 100%;
34    transition: all 0.3s ease;
35}

投稿2021/03/01 15:23

編集2021/03/02 09:17

Daregada

総合スコア11990

program

2021/03/02 06:26

ありがとうございます、無事下線が引けました。ただ、カーソルを外した時にもゆっくりと下線を消したいです。そこで .navbar .menu li a:hover::after の transition を .navbar .menu li a::after につけたのですが、そうするとnavber全体に下線が出現し消えていきます。なぜなのでしょうか。

Daregada

2021/03/02 09:18

修正した回答のようにCSSを設定してください。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

CSSでホバー時に下線を引き、文字の色も変えたい。

関連した質問