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)的提示

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