HTML / CSS

ホバー時に下線が横に伸びるアニメーション

ホバーした時にテキストに下線が伸びる。改行も大丈夫。

html
                  
                    
ホバー時に下線が横に伸びる
CSS
                  
                    .link-list__border {
                        font-size: 20px;
                        line-height: 1.5;
                        color: #333333;
                        background-image: linear-gradient(90deg, #000066, #000066);
                        background-repeat: no-repeat;
                        background-position: left bottom;
                        background-size: 0 1px;
                        text-decoration: none;
                        transition: background-size 0.5s;
                    }
                    .link-list__border:hover {
                        background-size: 100% 1px;
                    }

下線のサイズや位置を変えたいとき

CSS
                  
                    .link-list__border {
                        font-size: 16px;
                        line-height: 1.5;
                        color: #333333;
                        background-image: linear-gradient(90deg, #d10094, #d10094);
                        background-repeat: no-repeat;
                        background-position: right bottom;
                        background-size: 0 5px;
                        text-decoration: none;
                        transition: background-size 1s;
                        padding-bottom: 5px;
                    }
                    .link-list__border:hover {
                        background-size: 100% 5px;
                    }