用伪类实现两边横线、中间标题的样式

最新推荐文章于 2022-04-19 14:59:48 发布

樱桃小丸子~

最新推荐文章于 2022-04-19 14:59:48 发布

阅读量1.5k

点赞数

分类专栏：网页常用效果文章标签： class

本文链接：https://blog.csdn.net/horizon_26/article/details/77866693

版权

网页常用效果专栏收录该内容

1 篇文章 0 订阅

订阅专栏

先看下效果图：

这里写图片描述

要实现这种效果的，接着看代码：

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }

            .column-title {
                text-align: center; /* 标题居中  */
                font-size: 20px;    /* 字体大小  */
                margin: 50px;       /* 设置margin值，也可以不设置*/
            }

            .column-title:after,
            .column-title:before {
                content: "";
                border-top: 2px solid #E8E8E8;  /* 上边框 --效果图中的横线就是这里的上边框  */
                display: block;
                position: absolute;
                width: 26%;
                top: 60px;      /* 这里的top值= 标题的margin + 字体大小/2 ，*/
            }

            .column-title:before {
                left: 16%;      /* 左偏离 */
            }

            .column-title:after {
                right: 16%;     /* 右偏离 == 左偏离 */
            }
        </style>
    </head>

    <body>
        <h2 class="column-title">财富资讯</h2>
    </body>

</html>

原理：

在伪类中加上边框实现，也可用下边框实现，对应的top值也是 = 标题的margin + 字体大小/2

樱桃小丸子~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用伪类实现两边横线、中间标题的样式

用伪类实现两边横线、中间标题的样式
复制链接

扫一扫

专栏目录

用伪类实现 两边横线、中间标题的样式

“相关推荐”对你有帮助么？

用伪类实现两边横线、中间标题的样式