Exemple d'effet de soulignement dynamique utilisant CSS

Cet article partage principalement avec vous des exemples d'effets de soulignement dynamique CSS, dans l'espoir d'aider tout le monde.

Affichage de l'effet

Et le soulignement est de la même couleur que le lien hypertexte... Vous pouvez le tester vous-même...

Méthode de mise en œuvre

Ceci Nous pouvons facilement utiliser des pseudo-éléments CSS pour obtenir cet effet. Il utilise principalement l'échelle en transformation pour mettre à l'échelle les pseudo-éléments afin d'obtenir le résultat d'allongement des pseudo-éléments (soulignement). En même temps, utilisez transform-origin pour contrôler la direction du zoom. Copiez le code source ci-dessous pour utiliser...

Le code source est le suivant

dom :

    <a href="#" class="super-link center">
        动态下划线中间伸展    </a>
    <a href="#" class="super-link left">
        动态下划线左边伸展    </a>

    <a href="#" class="super-link right">
        动态下划线右边伸展    </a>

css :

        .super-link{            position: relative;            text-decoration: none;            color: #000;        }
        /*伪元素是两个冒号*/
        .super-link::after{            content: '';            width: 100%;            height: 1px;/*设置伪元素的高度，这里是下划线的粗细*/
            position: absolute;            top: 100%;            left: 0;            background-color: currentColor;/*当前标签继承的文字颜色，这里让伪元素的背景色与父元素的文字颜色相同*/
            transform: scale(0);            transition:all .35s;        }
        .super-link:hover::after{            transform: scale(1);        }
        .left::after{            transform-origin: left;        }
        .right::after{            transform-origin: right;        }
        .center::after{            transform-origin: center;        }

Recommandations associées :

Utilisez CSS pour obtenir l'effet de soulignement en pointillé de links_CSS/HTML

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!