css - 一条线两边有短线的样式表怎么写？

问题描述

图片的蓝线我想到的是单独用p写。

<p>abacedfg</p><p class='蓝线'></p>

我想直接在<p>abacedfg</p>这个p直接画出这样的线，这样少了一个p标签了。不知道css有没有技巧能画出这样两边有短线。

问题解答

直接上答案，一个<p>就可以做好:

http://jsfiddle.net/2drzmzkh/

使用了一个伪元素 ::before。

用两个伪元素绝对定位。。

楼上说的很对，在此补充一小点：用p的伪元素:before 和 :after，然后绝对定位到两边，IE7及以下不兼容，如果你需要兼容低版本的IE,则需要再考虑下。

左右两边的短线可以用p的左边边框，边框的颜色再利用css3的线性渐变linear-gradient可以实现，不过不向下兼容。

但其实直接在<p class='蓝色'></p>，加上border更好，多个p并没什么，兼容也较好。

要是不兼容低版本的IE的话，可以使用:after,:before来控制显示左右两边的边框，要是得兼容的话，那就像楼上那样子了，不过这样子的空白无意义的就偏多了

border-left,border-right

难道不是一个盒子都有边框，然后去掉上边框么？

cssp { border: 2px solid blue; border-top: none; width: 100%; height: 2px; overflow: hidden;}