鼠标移动到标题时,出现从中心向两边水平扩展的下划线

最新推荐文章于 2021-08-03 21:06:57 发布

sjy7329

最新推荐文章于 2021-08-03 21:06:57 发布

阅读量510

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/sunjynyue/article/details/83013351

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>Document</title>
    <style>
        .title{
            width:500px;
            height:200px;
            margin:0 auto;
            text-align:center;
            line-height:200px;
            position: relative;
        }
        .titleLine{
            width:0;
            height:2px;
            background:#000;
            transition:width 1s linear;
            position:absolute;
            margin:0 auto;
            top:150px;
            left:0;
            right:0;
        }
        .title:hover .titleLine{
            width:200px;
        }
    </style>
</head>
<body>
<div class="title">
    <h3>这里标题内容</h3>
    <p class="titleLine"></p>
</div>
</body>
</html>

sjy7329

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
鼠标移动到标题时,出现从中心向两边水平扩展的下划线

&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="Generator" content="EditPlus®"&gt; &lt;meta name="Author" content=&
复制链接

扫一扫