登录
首页 >  文章 >  前端

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

时间：2024-11-19 19:21:55 139浏览 收藏

小伙伴们对文章编程感兴趣吗？是否正在学习相关知识点？如果是，那么本文《如何实现 HTML 多行文本的悬停下划线效果？》，就很适合你，本篇文章讲解的知识点主要包括。在之后的文章中也会多多分享相关知识点，希望对大家的知识积累有所帮助！

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

多行文本悬停效果下划线

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

以下是如何修改代码：

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

<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 多行文本的悬停下划线效果？》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！

相关阅读
更多>
最新阅读
更多>
课程推荐
更多>