问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

一个css悬停效果?

头像
_XYZ111
    492257176
    <!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>

    image.png

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

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

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

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

    css
    阅读 2.2k
    1 个回答
    得票最新
    头像
    linong
      29.2k1266134
      ✓ 已被采纳

      我记得需要 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>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题