html在字体两边加直线,CSS文字两边添加横线的几种方法

这里总结了五种关于文字两边添加横线的方法。

欢迎补充！

最近的项目的设计经常用到文字两边添加横线的方法,这样看上去简洁明了,当然实现的方法也五花八门.

暂且不说哪种方法好，邓爷爷说过不管黑猫白猫抓到老鼠就是好猫.

详细说明

在现代浏览器中浏览,全部可以正常显示.

*第一种情况:

是用的标签类名最为多的一个,而实际上会用到这样去写的很少,而且随着伪类的出现,实现起来更加方便,但这个的兼容性好啊...

优: 兼容性强

弊: 繁琐

*第二种情况:

实际上使用:before 跟 :after 伪类写成的,左右比例可以自由调节.但头痛的是IE7一下用不了T T

优: 灵活性高

弊: 兼容性弱

*第三种情况:

这是两个特别冷门的标签 fieldset legend 在W3C里面解释说

fieldset:组合表单中的相关元素

legend为 fieldset 元素定义标题(caption).

据我了解:这两货是HTML4的产物,而在H5之后添加了3个新的属性. 所以这两货兼容性也不差 [说错的地方希望指正] 但是在例子当中, 它们对text-align:center特别不友好, 所以我在IE8- FF Safari Chrome 单独做了hack

优: 兼容性好啊贤心的layer说明文档页面就有用这个

弊: ---

第四种情况:

...这个可以不说明,就是请求的时候要多一张图片,建议图片做长一些.压缩一下. 我这里用了10001的尺寸,原图957B,压缩之后107B

优: 自己衡量

弊: ----

*第五种情况:

其实也是使用伪类去写的,只不过相比第二种少了一个伪类

优: 自己衡量

弊: IE7下看不到横线了

*第六种情况:

使用:before :after写的优: 自适应性很好

弊: 兼容性不好，用到flex transform css3写法

如果需要字数限制，可以在a标签加上

.sixth .sixth_main a {

padding: 0 15px;

flex-basis: 50%; //大小根据字数而定

text-align: center;

}

总结一下:

一般情况下,wap端我会使用第二或者第五中 (第六种)兼容性很好，感谢评论区@[深海哥哥]到的(https://www.jianshu.com/u/5e65e759535c)的提示

注意第一、五种情况,文字都是有用白色为背景色的,如果遇到底色为纯色的情况下还可以继续用,但是如果是图片为背景的话,要么切图对准,要么就换种方法吧,少折腾

html在字体两边加直线,CSS文字两边添加横线的几种方法相关推荐

html在字体两边加直线,css怎么在文字两边加上横线
css中可利用:before.:after和content属性来在文字两边加上横线:语法"E:before,E:after{content:"";flex:1 1;bor ...
h5的横线_CSS文字两边添加横线的几种方法
这里总结了五种关于文字两边添加横线的方法. 欢迎补充! 最近的项目的设计经常用到文字两边添加横线的方法,这样看上去简洁明了,当然实现的方法也五花八门. 暂且不说哪种方法好,邓爷爷说过不管黑猫白猫抓到老 ...
使用CSS为图片添加边框的几种方法
http://blog.163.com/zb_17173/blog/static/31167488201132915251674/ HTML <img class="shadow&qu ...
css中在图片上加透明,css 给图片添加滤镜效果，透明层毛玻璃效果
我们用的第一个滤镜是sepia(),他会给图片增加一整降饱和度的橙色染色效果原图添加sepia滤镜的效果 img{ width:100%; transition: .5s filter; filt ...
css实现文字左右添加横线
css实现文字左右添加横线方法一.div标签实现 HTML: <div class="thirdLine"><span class="line&quo ...
html分割线自动适应,CSS实现自适应分隔线的N种方法
CSS实现自适应分隔线的N种方法分割线是网页中比较常见的一类设计了, 这里的自适应是指两边的横线会随着文字的个数和父级的宽度自适应偷偷的看了一下知乎的实现,很显然是用一块白色背景覆盖的,加一点背景 ...
html按钮disabled状态,CSS定义input disabled样式的三种方法
表单提交的时候我们经常会让提交按钮禁用,满足条件后按钮恢复,disabled禁用按钮后怎么用CSS来改变禁用disabled按钮的样式呢?下面看青岛星网:CSS定义input disabled样式的三 ...
css清除浮动大全，共8种方法。
本文转载自:http://www.jb51.net/css/173023.html 清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果 ...
文字转语音文件的两种方法
文件转语音文件的两种方法.小伙伴们在日常的工作.学习或是生活当中,是否遇到过以下这种情况.在工作中每天要阅读大量文件资料,在学习中每天要阅读各种课文,在生活中也会观看各种小说.但是长时间的用眼阅读,就 ...

html在字体两边加直线,CSS文字两边添加横线的几种方法

html在字体两边加直线,CSS文字两边添加横线的几种方法相关推荐

最新文章

热门文章