如何实现 HTML 多行文本的悬停下划线效果？-css教程-PHP中文网

如何实现 HTML 多行文本的悬停下划线效果？

聖光之護

发布： 2024-11-03 16:58:14

原创

931人浏览过

如何实现 html 多行文本的悬停下划线效果？

多行文本悬停效果下划线

文本悬停下划线效果仅限一行，但可以通过在 css 中使用 inline 属性，将 p 元素设置为内联元素，从而实现多行文本的悬停下划线效果。

以下是如何修改代码：

在 <p> 元素中添加 class="test" 属性：

立即学习“前端免费学习笔记（深入）”；

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

<p class="test">
    这是一段测试文本 这是一段测试文本 这是一段测试文本
    ...
</p>

登录后复制

在 css 中添加以下样式：

.test {
    /* ... */
    display: inline;
}

登录后复制

这样，当 <p> 元素被悬停时，每一行都会出现下划线。

完整的修改后代码示例：

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Html Template</title>
</head>

<body class="dark">
    <style>
        .box-3 {
            display: inline-block;
            padding: 3rem;
            border: 3px solid red;
        }

        .box-3>p {
            position: relative;
        }

        .box-3>p:after {
            content: '';
            width: 0;
            height: 3px;
            position: absolute;
            top: 100%;
            left: 0;
            transition: all .5s;
            background: green;
        }

        .box-3:hover>p:after {
            width: 100%;
        }

        .test {
            /* 暂无内联样式 */
            display: inline;
        }

        .test:hover {
            background: linear-gradient(270deg, #00000036, #00ff53cf) 0 0;
            background: linear-gradient(270deg, #00ff53cf, #00ff53cf) 0 0;
            background-size: 100% 2px;
            background-repeat: no-repeat;
            background-position: 0% 100%;
        }
    </style>
    <main>
        <div class="container py-5">
            <div class="box-3">
                <p class="test">
                    这是一段测试文本 这是一段测试文本 这是一段测试文本
                    ...
                </p>
            </div>
        </div>
    </main>
</body>

</html>

登录后复制

以上就是如何实现 HTML 多行文本的悬停下划线效果？的详细内容，更多请关注php中文网其它相关文章！