css如何实现文字居中两边横线效果的示例代码

这里气候宜人,物产丰富,风景优美,是中国重点风景旅游城市。多明媚的秋天哪,这里,再也不是焦土和灰烬,这是千万座山风都披着红毯的旺盛的国土。那满身嵌着弹皮的红松,仍然活着,傲立在高高的山岩上,山谷中汽笛欢腾,白望在稻田里缓缓飞翔。秋天的美是成熟的——它不像春那么羞涩,夏那么坦露,冬那么内向。

本文介绍了css实现文字居中两边横线效果的示例代码,分享给大家,具体笔记如下:

效果:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .title{
            text-align: center;
            position: relative;
            height: 50px;
            line-height: 50px;
            width: 800px;
            margin: 200px auto;
        }
        .title:after,.title:before{
            content: "";
            position: absolute;
            top: 50%;
            background: #7a7a7a;
            height: 1px;
            width: 35%;
        }
        .title:after{
            left: 0;
        }
        .title:before{
            right: 0;
        }
    </style>
</head>
<body>
    <div class="title">css实现文字居中两边横线效果</div>
</body>
</html>

本文css如何实现文字居中两边横线效果的示例代码到此结束。失败面前无所谓高手,在失败的面前,谁都是凡人。小编再次感谢大家对我们的支持!

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案

CSS如何使用Flex和Grid布局如何实现3D骰子

Flex布局史上最简单使用语法教程

新的CSS 伪类函数 :is() 和 :where()示例详解

纯CSS打字动画的如何实现示例