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

Question

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

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

---

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

Answer 1

Go directly to the answer, one <p> can do it:

http://jsfiddle.net/2drzmzkh/

uses a pseudo element ::before.

Answer 2

Use two pseudo-elements for absolute positioning. .

Answer 3

What the person above said is correct. I would like to add a little point here: use p pseudo-elements: before and :after, and then absolutely position them on both sides. IE7 and below are not compatible. If you need to be compatible with lower versions of IE, then Need to think about it again.

Answer 4

The short lines on the left and right sides can be realized by using the left border of p, and the color of the border can be achieved by using the linear gradient of CSS3 linear-gradient, but it is not backward compatible.

But in fact, it is better to add <p class="蓝色"></p> directly to border. Multiple ps are not a problem and the compatibility is better.

Answer 5

If it is not compatible with lower versions of IE, you can use :after, :before to control the display of the left and right borders. If it is compatible, it will be like the one above, but the blank space is meaningless. Too much

Answer 6

border-left,border-right

Answer 7

Don’t a box have a border, and then the top border is removed?

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