CSSの擬似要素を使って動く下線を出したいです

Question

前提・実現したいこと

HTML・CSSの初心者です。
グローバルナビを作成してます。
"あああ"の下にCSSで動く下線を出したいのですが出てきません。
ご教授お願いいたします。

<header class="header">
<div class="header__inner">
<p class="header__logo"><a href=""></a></p>
<nav class="header__gnav">
<ul class="header__gnavList">
<li class="header__gnavItem">
<a href="" class=""><span>あああ</span></a></li>
<li class="header__gnavItem">
<a href="" class=""><span>あああ</span></a></li>
<li class="header__gnavItem">
<a href="" class=""><span>あああ</span></a></li>
</ul>
</nav>
</div>
</header>

.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 0 40px;
background: #fff;
font-weight: 600;
box-sizing: border-box;
box-shadow: 0 1px 1px rgba(0,0,0,.1);
z-index: 1000;
}

.header__inner {
display: table;
table-layout: fixed;
width: 100%;
height: auto;
}

.header__gnav, .header__logo {
display: table-cell;
line-height: 1;
vertical-align: middle;
}

.header__logo {
width: 130px;
background-position: left center;
background-repeat: no-repeat;
background-image: url(img/※※※.svg);
background-size: 130px auto;
}

.header__gnav {
position:relative;
padding-right: 80px;
text-align: right;
box-sizing: border-box;
}

.header__gnavList {
position: relative;
display: flex;
justify-content: flex-end;
align-items: center;
}

.header__gnavItem{
position: relative;
display: inline-block;
vertical-align: middle;
font-size: 1.5rem;
}

.header__gnavItem a {
display: flex;
align-items: center;
height: 80px;
padding: 0 32px;
color: #1a1a1a;
}


.header__gnavItem >a:after{
position: absolute;
display: block;
content: "";
bottom: 0;
left: 0;
width: 0;
height: 4px;
background: #EC6C00;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}

Comments

[m.ts10806]

再現確認の際に【CSS】のようにコード内にコードではないものがあるとコピペ後に消したりしなければならないのでコードブロックから出してもらえると助かります。

[m.ts10806]

やり方かえたほうがいいかもしれません。http://inkdesign.jp/notes/pseudo-animation/ >擬似要素では”基本的に”アニメーションが無効となる

[i_tkk]

早速のご返答ありがとうございます。すみません、コードブロックのことがよくわかっておらず...

[i_tkk]

:hoverと:afterそれぞれ記入するということでしょうか？

[m.ts10806]

コードを｀｀｀で囲ってますよね。それがコードブロックです。コードが見やすくなりコピーボタンもつきます。言語名は中に書くのではなくコードブロック冒頭のに```css ```html のようにすると言語に即したハイライトがかかり、更に読みやすくなります

[i_tkk]

編集しました、これで大丈夫でしょうか？

[kei344]

「動く下線」はどうやったら動く想定ですか？ご自身で試された物を追記してください。

[m.ts10806]

仕様的には右記のようになっているので何かしらかます必要があるのでは、という意味です。　https://developer.mozilla.org/ja/docs/Web/CSS/transition　>それぞれの状態は :hover や :active のような疑似クラスで定義するか、 JavaScript を使用して動的に設定します。

Answer 1

ホバーで動く場合。

/* 追加 */
.header__gnavItem >a:hover::after{
width: 100%;
}
```**動くサンプル：**[https://jsfiddle.net/fLhgrauj/](https://jsfiddle.net/fLhgrauj/)

Comments

[i_tkk]

不在にしておりました。大変申し訳ありません。ご提示くださったコードに変更したところ、希望通りの動きになりました。ありがとうございます！