css 文字中间 两边横线

最新推荐文章于 2022-04-19 14:59:48 发布
最新推荐文章于 2022-04-19 14:59:48 发布
阅读量737 收藏 2
点赞数 2
分类专栏： css 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/p_pppxxxxmmm/article/details/107711902
版权
本文介绍了一种使用CSS伪类和背景定位来创建文字中间两侧横线的简洁方法，避免了使用额外标签的低效写法。通过调整伪类的宽高和位置，可以轻松实现这种效果。
摘要由CSDN通过智能技术生成

先看效果图

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

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

.footer {
   
  width: 100%;
  height: 143px;
  font-size: 24px;
  font-weight: 400;
  color
最低0.47元/天 解锁文章
有脾气的程序媛
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
css实现中间文字两边横线效果
09-22
主要介绍了css实现中间文字两边横线效果 ,需要的朋友可以参考下
CSS实战样式：文字两侧加居中横线
Bumphy的博客
10-23 1万+
CSS实战样式：文字两侧加居中横线在日常的开发中，会遇到这样的需求
css实现中间文字 两端横线的两种方法
weixin_39060799的博客
10-25 7238
效果图 代码 <!DOCTYPE html> <html> <head> &a
css样式，中间文字，两边横线
安静的对折的专栏
04-10 3万+
在项目中遇到过中间文字，两边横线的布局，如下图： 两边横线我们可以使用标签的上边框或者下边框，然后对中间的文字使用 vertical-align 属性来控制。 html 产品清单 css .order { height: 60px; line-height: 60px; text-align: center; } .or
css字体加横线方法
WhoWrongsWhere的专栏
05-07 2万+
可以使用style="text-decoration:line-through;" 使得字体。还可以使用下划线style="text-decoration:underline;";上划线style="text-decoration:over-line;"
css实现文字居中两边横线效果的示例代码
09-22
主要介绍了css实现文字居中两边横线效果的示例代码的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
css 两边固定中间自适应布局的实现
09-22
主要介绍了css 两边固定中间自适应布局的实现，介绍了四种常用方法以及原理：浮动、浮动内嵌 div、定位、flex。具有一定的参考价值，感兴趣的小伙伴们可以参考一下
html 文字两边加横线\竖线\ Css3中间文本两侧横线、左侧添加一个竖线
林中明月间丶
11-11 1万+
第一种： //横线 <style> .exple { height: 50px; line-height: 60px; text-align: center; } .order .line { display: inline-block; width: 250px; // 横线长度 border-top: 1...
CSS 文字下面横线
felicity_zll的博客
06-11 2972
.active{ position:relative; color:#ff0005; } .active::before{ position:absolute; bottom:0; left:50%; transform:translateX(-50%); content:''; width:50rpx; height:5rpx; border-radius:5rpx; background-color:...
用css方法，给标题两边加小横杠
u011200562的博客
03-29 2425
我们经常会遇到这样的 UI 需求，就是标题两边有两个小横岗，之前是怎么实现的呢？比如用个border-top属性，然后再把中间的文字进行绝对定位，同时给这个文字一个背景颜色，把中间的这部分盖住。 .title { color: #e1767c; font-size: 0.3rem; position: rela...
html字两边的横线_css实现中间文字，两边横线效果
weixin_39636245的博客
12-20 861
1. vertical-align属性实现效果：vertical-align 属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。中间文字，两边横线.header{width:400px;height:36px;line-height:36px;border:1px solid green;text-align:center;}.li...
html在字体两边加直线,css怎么在文字两边加上横线
weixin_30980893的博客
05-31 3261
css中可利用:before、:after和content属性来在文字两边加上横线；语法“E:before,E:after{content:"";flex:1 1;border-bottom:2px solid;}”，E为包含文字的元素。本教程操作环境：Windows7系统、css3版本、Dell G3电脑。css在文字两边加上横线的方法在css中，可以利用:before、:after选择器和co...
css实现文字中间横线,css实现文字居中两边横线效果的示例代码
weixin_33502772的博客
08-04 1283
本文介绍了css实现文字居中两边横线效果的示例代码，分享给大家，具体笔记如下：效果：content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">Document.title{text-align: center;position: relativ...
中间文字，两边横线（纯css实现的哦）
珍妮的小罐君
08-18 2万+
最近在做项目的时候，遇到了一个中间文字，两边横线的布局，如下图： 第一种： 代码如下： Title body{background: #f0f0f0} .con{position:relative;height:1.875rem;line-height: 1.875rem;margin:2.47rem auto;te
html字两边的横线_CSS，中间文字 两边横线 CSS样式写法
weixin_29369347的博客
12-30 1579
在项目中遇到过中间文字，两边横线的布局，如下图：两边横线我们可以使用标签的上边框或者下边框，然后对中间的文字使用vertical-align 属性来控制。产品清单css.order{height:60px;line-height:60px;text-align:center;}.order.line{display:inline-block;width:150px;bord...
CSS实现文字两边横线,CSS实现文字两边线条
mashangzhifu的博客
04-19 2443
先看效果，其他方式登陆两边各有一条横线 代码如下，用的是scss语法： uniapp中，如果是普通的html，将view替换成div即可。 <view class="other-login"> <view class="line"></view> <view class="other"> <view class="text">其他方式登陆</view> </view&g
css 横线中间的文字
张许许的博客
08-14 1925
.gaikuang:before{ content: ''; position: absolute; top: 5%; left: 0px; background: #dad6d6; width: 44%; height: 1px; } .gaikuang:after { content: ''; position: abso...
CSS伪类before，after制作左右横线中间文字效果
热门推荐
baidu_33163851的博客
05-03 4万+
html lang="en"> head> meta charset="UTF-8"> title>Titletitle> style> .container{ width: 1000px; margin: 10px auto; border: 1px solid red;
css文字两边加横线
最新发布
06-13
在CSS中，如果你想给文本添加上下或左右的装饰线（横线），你可以使用`text-decoration`属性。具体来说，有两个相关的值可以实现这个效果： 1. `underline`: 为文本添加下划线。 2. `line-through`: 为文本创建一条...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值