a标签下滑线的

最新推荐文章于 2023-10-19 10:47:25 发布

我最帅气257

最新推荐文章于 2023-10-19 10:47:25 发布

阅读量189

点赞数

本文链接：https://blog.csdn.net/weixin_56115652/article/details/118150259

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        p {
            font-size: 30px;
            color: blueviolet;
        }
        a {
            /* 给a标签加下划线 */
            text-decoration: none;  
            color: blueviolet;

            position: relative;
            /* 裁切下划线使其隐藏 */
            transition: clip-path 275ms ease;
        }

        /* a:focus 获取焦点的时触发 */
        a:hover span::before,
        a:focus span::before {  
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        }

        span {
            position: relative;
            display: inline-block;
            color: #2c2fe8;
        }

        span::before {
            position: absolute;

            height: 200px;
            width: 100px;
            /* 获取重写span标签里的内容 */
            content: attr(data-content);

            color: #1619cb;
            text-decoration: underline;
            text-decoration-color: #1619cb;

            /*  clip-path: polygon(0 0, 0 0, 0%  100%, 0 100%); 裁切下划线使其隐藏 */
            clip-path: polygon(0 0, 0 0, 0%  100%, 0 100%);
            transition: clip-path 275ms ease;

            /* 给下划线的波浪样式 */
            text-decoration-style: wavy;
        }
    </style>
</head> 
<body>
    <p>你好吗？<a href="###" ><span data-content="我很好">我很好</span></a></p>
</body>
</html>

我最帅气257

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
a标签下滑线的

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do
复制链接

扫一扫