Example of dynamic underline effect using css

This article mainly shares with you examples of CSS dynamic underline effects, hoping to help everyone.

Effect display

And the underline is the same color as the hyperlink... You can test it yourself...

Implementation method

This We can easily use css pseudo elements to achieve this effect. It mainly uses the scale in transform to scale the pseudo-elements to achieve the result of elongating the pseudo-elements (underline). At the same time, use transform-origin to control the zoom direction. Copy the source code below to use...

The source code is as follows

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;        }

Related recommendations:

Use CSS to achieve the dotted underline effect of links_CSS/HTML

The above is the detailed content of Example of dynamic underline effect using css. For more information, please follow other related articles on the PHP Chinese website!