一个css悬停效果?
<!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%;
}
</style>
<main>
<div class="container py-5">
<div class="box-3">
<p>
这是一段测试文本 这是一段测试文本 这是一段测试文本
</p>
<p>
这是一段测试文本 这是一段测试文本 这是一段测试文本
</p>
<p class="mb-0">
这是一段测试文本 这是一段测试文本 这是一段测试文本
</p>
</div>
</div>
</main>
<script></script>
</body>
</html>
当前的效果是悬停时会有伸长的下划线, 但是会有一个问题, 只能做一行
如果我把p标签结构改成如下
<p>
这是一段测试文本 这是一段测试文本 这是一段测试文本
这是一段测试文本 这是一段测试文本 这是一段测试文本<br>
这是一段测试文本 这是一段测试文本 这是一段测试文本
</p>
那么如何在悬停时让每一行都出现线条?
回复
1个回答

test
2024-07-02
我记得需要 inline 即可。 搞定 https://jsrun.net/c7FKp/edit
<!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{
/* background: red; */
display: inline;
transition: all .5s;
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%;
background-size: 0% 2px;
}
.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>
这是一段测试文本 这是一段测试文本 这是一段测试文本
这是一段测试文本 这是一段测试文本 这是一段测试文本
这是一段测试文本 这是一段测试文本 这是一段测试文本
这是一段测试文本 这是一段测试文本 这是一段测试文本
这是一段测试文本 这是一段测试文本 这是一段测试文本
</p>
<p>
这是一段测试文本 这是一段测试文本 这是一段测试文本
</p>
<p class="mb-0">
这是一段测试文本 这是一段测试文本 这是一段测试文本
</p>
</div>
</div>
</main>
<script></script>
<p class="test">
这是一段测试文本 这是一段测试文本 这是一段测试文本
这是一段测试文本 这是一段测试文本 这是一段测试文本
这是一段测试文本 这是一段测试文本 这是一段测试文本
这是一段测试文本 这是一段测试文本 这是一段测试文本
这是一段测试文本 这是一段测试文本 这是一段测试文本
</p>
</body>
</html>
回复

适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容