カーソルがhoverしたときの下線の幅の変え方

前提・実現したいこと

メニューバー上にカーソルを持ってきたときに下線が浮かび上がるようにはできたが、下線の幅を変更することができない。
文字の左右に均等に広げたい。

発生している問題・エラーメッセージ

下線の幅を変更することができない。

該当のソースコード

html
1<div class="menubar">
2            <ul>
3                <li><a href="index.html">Home</a></li>
4                <li><a href="#">About</a></li>
5                <li><a href="#">Gallery</a></li>
6                <li><a href="#">Link</a></li>
7            </ul>
8        </div>
9

css
1
2.menubar ul li {
3    list-style: none;
4    display: inline-block;
5    padding: 25px 33px;
6    font-size: 18px;
7    opacity: .7;    
8}
9
10.menubar ul li a {
11    transition: color 0.3s;
12    position: relative;
13}
14
15.menubar ul li a:link, a:visited, a:active a:hover {
16    color: black;
17    text-decoration: none;
18}
19
20.menubar ul li a:hover {
21    color: sandybrown;
22}
23
24.menubar ul li a::after {
25    position: absolute;
26    bottom: -20px;
27    left: 0;
28    content: '';
29    width: 100%;
30    height: 4px;
31    background: sandybrown;
32    opacity: 0;
33    visibility: hidden;
34    transition-duration: .7s;
35}
36
37.menubar ul li a:hover::after {
38    bottom: -20px;
39    opacity: 1;
40    visibility: visible;
41    padding-left:10px;
42  }
43

試したこと

paddingを指定した。しかし、右側のみに広がり左右対処にならなかった。
.menubar ul li a::after の widthを100%以上にしたが、変わらなかった。

補足情報（FW/ツールのバージョンなど）

vscodeを使用しています。

meg_

2021/04/01 11:25

> 文字の左右に均等に広げたい。どの状態からその状態にしたいのでしょうか？

Shiroki

2021/04/01 12:25

文字幅と同じ幅になっている状態からです。

kei344

2021/04/02 04:51

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

Shiroki

2021/04/02 04:55

すぐにします！ご親切にありがとうございます。

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

回答1件

ベストアンサー

中心から広がる感じでしたら下記で出来るかと思います。

CSS
1.menubar ul li {
2    list-style: none;
3    display: inline-block;
4    padding: 25px 33px;
5    font-size: 18px;
6    opacity: .7;    
7}
8.menubar ul li a {
9    transition: color 0.3s;
10    position: relative;
11}
12.menubar ul li a:link, a:visited, a:active a:hover {
13    color: black;
14    text-decoration: none;
15}
16.menubar ul li a:hover {
17    color: sandybrown;
18}
19.menubar ul li a::after {
20    position: absolute;
21    bottom: -20px;
22    left: 50%;
23    width: 0;
24    content: '';
25    height: 4px;
26    background: sandybrown;
27    opacity: 0;
28    visibility: hidden;
29    transition-duration: .7s;
30}
31.menubar ul li a:hover::after {
32    opacity: 1;
33    visibility: visible;
34    width: 100%;
35    left: 0;
36  }