一个css悬停效果?

作者站长头像
站长
· 阅读数 9
<!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>

一个css悬停效果?

当前的效果是悬停时会有伸长的下划线, 但是会有一个问题, 只能做一行

如果我把p标签结构改成如下

<p>
  这是一段测试文本 这是一段测试文本 这是一段测试文本
  这是一段测试文本 这是一段测试文本 这是一段测试文本<br>
  这是一段测试文本 这是一段测试文本 这是一段测试文本
</p>

那么如何在悬停时让每一行都出现线条?

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