用css方法，给标题两边加小横杠

﹏ヽ暗。殇╰゛Y 2023-07-19 04:48 10阅读 0赞

我们经常会遇到这样的 UI 需求，就是标题两边有两个小横岗，之前是怎么实现的呢？比如用个border-top属性，然后再把中间的文字进行绝对定位，同时给这个文字一个背景颜色，把中间的这部分盖住。  
![在这里插入图片描述][20200329160126820.png]

.title { 
                color: #e1767c;
                font-size: 0.3rem;
                position: relative;
                text-align: center;
                font-size: 30px;
            }
            
            .title:before, .title:after { 
                content: "";
                position: absolute;
                display: block;
                left: 50%;
                top: 50%;
                -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
                border-top: 0.2rem solid #e1767c;
                width: 2rem;
            }
            
            .title:before { 
                margin-left: -4rem;
            }
            
            .title:after { 
                margin-left: 4rem;
            }

[20200329160126820.png]: /images/20230528/226d4c8b1d9940beb8d5a9eaf853ae01.png

发表评论取消回复

表情：

评论列表（有 0 条评论，10人围观）

还没有评论，来说两句吧...

相关阅读

相关用css方法，给标题两边加小横杠

我们经常会遇到这样的 UI 需求，就是标题两边有两个小横岗，之前是怎么实现的呢？比如用个border-top属性，然后再把中间的文字进行绝对定位，同时给这个文字一个背景颜色，把

﹏ヽ暗。殇╰゛Y/ 2023年07月19日 04:48/ 0 赞/ 11 阅读

相关给网页标题前加一个小图标

在head部分添加一个link标签 <!DOCTYPE html> <html> <head> <title>Vue测试</title>

本是古典何须时尚/ 2023年06月10日 03:26/ 0 赞/ 21 阅读

相关如何兼容苹果手机inphoneX（底部横杠）

//html中添加 <meta name="viewport" content="width=device-width,height=device-height

野性酷女/ 2023年01月17日 02:26/ 0 赞/ 218 阅读

相关 Nginx末尾加杠不加杠的问题

假设访问路径的 /pss/bill.html 加/斜线的情况 location /pss/ \{ proxy\_pass http://127.0.0.1:18081

「爱情、让人受尽委屈。」/ 2022年10月18日 01:47/ 0 赞/ 157 阅读

相关 Kotlin去掉UUID 横杠方法

简简单单，一行代码搞定： val uuid = UUID.randomUUID().toString().replace("-", “”) 如果在Java中也可以用

绝地灬酷狼/ 2022年09月12日 14:48/ 0 赞/ 170 阅读

相关 Linux指令和对应的英文全称，Linux单横杠和双横杠的区别

1、linux单横杠双横杠的区别其实不叫横杠，是叫hyphen连字符。 \-，单个连字符跟的是多个单字符参数，--，双连字符跟的是单个多字符参数想想这

心已赠人/ 2022年09月09日 11:44/ 0 赞/ 10 阅读

相关 web项目中加斜杠与不加斜杠

加斜杠是绝对路径，基于http://localhost:8080/ 不加斜杠是相对路径，基于当前文件，如果设置了base则基于base <% String

淡淡的烟草味﹌/ 2022年06月11日 02:17/ 0 赞/ 208 阅读

相关用matplotlib画图时，给图像标题、横纵坐标轴的标签、图例显示中文名字

import matplotlib.pyplot as plt from matplotlib.font\_manager import FontProperties

「爱情、让人受尽委屈。」/ 2022年01月27日 16:17/ 0 赞/ 393 阅读

相关小程序底部按钮兼容 iPhone X（解决底部横杠遮挡问题）

解决方式：底部增加 34px 的高度，使元素不被横杠遮挡。效果图： <table> <tbody> <tr> <td style="width:42

水深无声/ 2021年12月18日 22:23/ 0 赞/ 628 阅读

相关【错误记录】mysql数据库名称-（横杠）

mysql使用sql语句的时候创建数据库，数据库名称不能包含-，否则会提示语法错误，例如： mysql> create database mall-order;

小鱼儿/ 2021年10月15日 12:25/ 0 赞/ 394 阅读