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

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

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

---

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

---

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

http://jsfiddle.net/2drzmzkh/

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

---

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

---

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

---

border-left,border-right

---

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

---

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

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

---

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

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