CSS標題線（刪除線貫穿線效果）實現之一二

緣起

其實看到這個問題，內心已經默默把代碼已經碼好了~，不就想下面這樣嘛：
JSBIN代碼示例

嗯，是的，咱們平常確實基本上就是用的這種方式，也沒啥問題呀~，來個背景色定下位就歐拉歐拉的了。

不過，由於一次問題須要，發現仍是有須要多瞭解下的。

---

來，請看下圖，這個需求是這樣子的，實現這樣子的效果（能夠先構思下實現代碼，看下思路是否是差很少的呢？）

能夠看到，這個線後面有背景圖，隨着屏幕尺寸漸寬時，會蓋到背景圖上，縮小時，則不會蓋在背景圖上，這就不能使用咱們日常的填充背景色的寫法了，只能另尋他路（想到有什麼好的方法實現了麼？）

因此這個問題是：因屏幕的伸展收縮會致使內容區所能容納的內容不一，從而致使高度不一，各個元素也是隨着屏幕時高時底，背景色的用法沒法生效，有何好的解決辦法？

固然，你有可能會說這是特例，能夠直接上圖，當然這種方式能夠，可是，有不少這樣的區塊，難道就所有都直接上圖麼？確定不行啦~，能懶就懶，如能找到一勞永逸的辦法確定比直接上圖，結果發現弄完發現文案有問題，要改字就蛋疼了。

方法

好了，開始想辦法解決上面的問題了。

先從float下手，兩條線各浮動在兩側，其實咱們能夠理解爲常見的網頁三欄佈局，但是問題是，不能定寬度呀，定了還怎麼去自適應呢？因此這條pass

既然float不行了，那想一想別的，這回就用position吧~開頭的用法也是這種，不過是有背景色的而已，這回咱們不準用背景色，看如何處理這個問題。

首先，基本結構：

<div class="title">
    <span class="caption">Headling</span>
</div>

咱們能夠用僞類:before、:after來生成一些可有可無的東西，不過爲了能讓你們看的清楚些，直接用標籤了，
這是改進後的結構：

<div class="title">
    <span class="caption"><span class="line line-l"></span>Headling<span class="line line-r"></span></span>
</div>

接着給樣式（答案就在裏面噢）：

.title { position: relative; z-index: 2; font-size: 16px; line-height: 24px; text-align: center; color: #999; overflow: hidden; }
.title .caption { position: relative; display: inline-block; }
.title .caption .line { position: absolute; top: 11px; width: 600px; height: 1px; background-color: #ddd; }
.title .caption .line-l { right: 100%; margin-right: 15px; }
.title .caption .line-r { left: 100%; margin-left: 15px; }

看了上面的樣式有沒看出些端倪呢？解釋下這個實現細節：

• 首先，將.caption設爲行內框，相對定位

• 接着，兩根線的定位是被.caption所包含的，接着將它們推向它們各自的地方（left: 100%、right: 100%），應該知道這100%是基於誰算的吧？（沒錯，就是第一步裏的.caption，結果你應該猜到了？）

• 最後再用margin-left/right隔出間隙，就知足了咱們的需求啦

咱們能夠將.line的寬度設的超長，overflow掉便可，這樣就能夠作到自適應了，下面提個小問題：

用以上的方法，解決這個線的問題~

最後

這個問題還有別的解決方式，好比line-gradient這些~

參考

Line-On-Sides Headers