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

左邊框，右邊框

Answer 7

不是一個盒子都有邊框，然後去掉上邊框麼？

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