css 文字中间两边横线

先看效果图

开始的时候两边的横杠我是用了两个标签去写的，现在想想这个写法好low，无脸面对各位前端同胞

现在有更简单的方法，来，直接贴代码：

.footer {width: 100%;height: 143px;font-size: 24px;font-weight: 400;color: rgba(153, 153, 153, 0.6);text-align: center;line-height: 156px;position: relative;
}// css 伪类写法
.footer:before, .footer:after { content: ''; position: absolute; // 定位背景横线的位置top: 53%;background: #999999; // 给背景加高亮width: 6px;height: 2px; }.footer:before {left: 32%;}.footer:after {right: 32%;
}

用css伪类写法，再定位背景横线的位置，宽和高做出来的背景横线，就可以得到文字中奖，两边横杠的效果了，
大家有更改的方法欢迎留言评论

css 文字中间两边横线相关推荐

css样式，中间文字，两边横线
在项目中遇到过中间文字,两边横线的布局,如下图: 两边横线我们可以使用标签的上边框或者下边框,然后对中间的文字使用 vertical-align 属性来控制. html <div class=& ...
css实现文字中间横线,css实现文字居中两边横线效果的示例代码
本文介绍了css实现文字居中两边横线效果的示例代码,分享给大家,具体笔记如下: 效果: content="width=device-width, user-scalable=no, init ...
html文字左右两边有居中的直线,css怎么实现文字居中两边横线效果
css怎么实现文字居中两边横线效果发布时间:2021-03-19 09:50:44 来源:亿速云阅读:92 作者:小新这篇文章将为大家详细讲解有关css怎么实现文字居中两边横线效果,小编觉得挺实 ...
中间文字，两边横线（纯css实现的哦）
最近在做项目的时候,遇到了一个中间文字,两边横线的布局,如下图: 第一种: 代码如下: <!DOCTYPE html> <html lang="en"> & ...
中间文字，两边横线（纯css实现）
遇到了一个中间文字,两边横线的布局,效果如下图: 第一种方法:使用了背景色和透明度,细心的人可能会发现,body设置的背景色刚好是'工商信息'的文字的背景色,同时也用了行内块.透明度以及相对定位来实现 ...
中间文字，两边横线css
<!doctype html> <html lang="en"><head><meta charset="UTF-8" ...
html字两边的横线_css实现中间文字，两边横线效果
1. vertical-align属性实现效果: vertical-align 属性设置元素的垂直对齐方式. 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐.允许指定负长度值和百分比值. ...
html字两边的横线_css如何实现中间文字，两边横线的标题效果？（代码示例）...
本篇文章给大家带来的内容是介绍css如何实现中间文字,两边横线的标题效果?(代码示例).有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 1. vertical-align属性实现效果 ...
css文字右边加横线,CSS伪类before，after制作左右横线中间文字效果
Title .container{ width: 1000px; margin: 10px auto; border: 1px solid red; } h3.title { color: #F2AE ...

css 文字中间两边横线

css 文字中间两边横线相关推荐

最新文章

热门文章

css 文字中间 两边横线

css 文字中间 两边横线相关推荐

最新文章

热门文章

css 文字中间两边横线

css 文字中间两边横线相关推荐