問題描述

圖片的藍線我想到的是單獨用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;}