当前位置:首页 > CSS > 关键词 > CSS伪类 > 正文

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

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

企业网站制作过程中,经常需要用到如下的效果,这个时候可以使用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: ''; 伪类中必须有此标签,否则无法生效;
  • 具体左右距离可根据实际尺寸灵活调整;

本文属原创,转载请注明原文:https://www.zhimatong.com/jiaocheng/518.html

为保证教程的实用性及扩大知识面覆盖,如果您有相似问题而未解决,可联系在线客服免费技术支持。

内容有用

联系
顾问

在线
客服
账号登录

没有账号?立即注册

忘记密码

登录即同意用户协议没有账号? 立即注册
账号注册
我已阅读并同意用户协议
立即注册
注册即同意用户协议已有账号? 立即登录
找回密码

操作步骤:邮箱验证->设置新密码

注册即同意用户协议已有账号? 立即登录