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

Question

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

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

---

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

Answer 1

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

http://jsfiddle.net/2drzmzkh/

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

Answer 2

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

Answer 3

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

Answer 4

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

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

Answer 5

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

Answer 6

border-left,border-right

Answer 7

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

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