位置：广州松河 > 技术支持 > CSS 中间文字、两侧居中横线（使用伪类before，after）_CSS学习

CSS 中间文字、两侧居中横线（使用伪类before，after）_CSS学习

来源：网络整理时间：2023/3/4 1:04:48 共 3623 浏览

中间文字两边横线 CSS样式写法
两边文字、中间横线的CSS写法

本文再介绍一种关于文字与横线的关系，中间文字，两侧横线，主要方法：CSS伪类before，after制作左右横线中间文字效果

HTML：

<div class="container">

    <h3 class="title">Welcome to <span>Snapshot</span></h3>

</div>

CSS：

.container{

            width: 800px;

            margin: 10px auto;

            border: 1px solid red;

        }

        h3.title {

            color: #F2AE11;

            font-size: 1.3em;

            margin-bottom: 3em;

            text-align: center;

            font-weight: 500;

            line-height: 1.1;

        }

        h3.title span {

            display: block;     /*设置为块级元素会独占一行形成上下居中的效果*/

            font-size: 3em;

            color: #212121;

            position: relative;   /*定位横线（当横线的父元素）*/

        }

        h3.title span:before, h3.title span:after {

            content: '';                 /*CSS伪类用法*/

            position: absolute;         /*定位背景横线的位置*/

            top: 52%;

            background: #494949;       /*宽和高做出来的背景横线*/

            width: 29%;

            height: 2px;

        }

        h3.title span:before{

            left: 5%;        /*调整背景横线的左右距离*/

        }

        h3.title span:after {

            right: 5%;

        }

版权说明：
本网站凡注明“广州松河原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：CSS修改swiper幻灯片 - 状态圆点变长条修改_网页特效 | ·下一条：两边文字、中间横线的CSS写法_CSS学习