文本悬停下划线效果仅限一行，但可以通过在 css 中使用 inline 属性，将 p 元素设置为内联元素，从而实现多行文本的悬停下划线效果。
以下是如何修改代码：
在
元素中添加 class="test" 属性：
<p class="test"> 这是一段测试文本 这是一段测试文本 这是一段测试文本 ... </p>
在 css 中添加以下样式：
.test {
/* ... */
display: inline;
}这样，当
元素被悬停时，每一行都会出现下划线。
完整的修改后代码示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Html Template</title>
</head>
<body>
<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>
<p>
这是一段测试文本 这是一段测试文本 这是一段测试文本
...
</p>
</div>
</div>
</main>
</body>
</html> 
还木有评论哦，快来抢沙发吧~