怎樣用CSS製作這樣的效果？

01-14

如上圖，中間是文，兩端一條橫線
謝謝，請給出CSS代碼

HTML：

& & &張某隻& &

CSS：

div { position: relative; text-align: center; height: 30px; }


hr {

    position: absolute;

    width: 100%;

    top: 6px;

    background: #000000;

    height: 1px;

    border: 0;

}

span { position: relative; background: #fff; top: 6px; padding: 0px 17px; }

效果：

偽元素:before,:after{content:""}

我實現過一個：tentomon - Rule

& & & & &無標題文檔& &


&

&


&
asdfas f&
&
&

&

善用 ::before 和 ::after

詳見 semantic—ui