CSS伪元素before,after制作左右横线中间文字效果

作者 : MOOMOO 本文共1068个字,预计阅读时间需要3分钟 发布时间: 2022-04-25 共25人阅读

企业网站制作过程中,经常需要用到如下的效果,这个时候可以使用CSS伪类实现:

实现效果

代码示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
        .title {
            color: #333;
            text-align: center;
            line-height: 1.1;
        }
        .title span {
            display: block;     /*设置为块级元素会独占一行形成上下居中的效果*/
            font-size: 30px;
            color: #137c32;
            font-weight: bold;
            letter-spacing:5px; /*字间距*/
            position: relative;   /*定位横线(当横线的父元素)*/
        }
        .title span:before, .title span:after {
            content: '';                 /*不可少,否则伪类无效,CSS伪类用法*/
            position: absolute;         /*定位背景横线的位置*/
            top: 52%;
            background: #ccc;       /*宽和高做出来的背景横线*/
            width: 9%;
            height: 2px;
        }
        .title span:before{
            left: 35%;        /*调整背景横线的左右距离*/
        }
        .title span:after {
            right: 35%;
        }
    </style>
</head>
<body>
    <div>OUR ADVATAGES<span>产品优势</span></div>
</body>
</html>

示例说明

  • content: ”; 伪类中必须有此标签,否则无法生效;
  • 具体左右距离可根据实际尺寸灵活调整;
1. 本站所有资源来源于用户上传和网络,仅作为演示数据,如有侵权请邮件联系站长!
2. 本站客服QQ:4387159,唯一购买官网:MooMoo.TOP!
3. 盗版,破解有损他人权益和违法作为,请各位会员支持正版!
MooMoo » CSS伪元素before,after制作左右横线中间文字效果

常见问题FAQ

是否支持共享资源赚外快?
本站支持任何人上传资源,一经采用即可展示,客户下单既有80%的提成。
可以免费教技术吗?
大家可以加群进行探讨共同进步,重点问题管理员会进行解答。
我是小白要怎么学习?
加群后做到不耻下问,看文章学习演示就能成为大佬。

发表评论