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

来源：互联网发布：人民网软件下载编辑：程序博客网时间：2024/05/02 00:44

先看下效果图：

这里写图片描述

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

<!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

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

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