標題線樣式Title-line CSS 的解法

有天，學妹拋了一個問題出來。
在一連串的資料蒐集跟討論完成了這個任務，過程也蠻有意思的。

(以下內容有調順一下或是修改，看起來比較好理解)

「有沒有辦法只用 CSS 在 Title 後方壓一條線?」

我：「標籤文字的部分用span包起來，外層處理線，內層處理文字。」

之後我蒐集出了較一般的做法
https://codepen.io/ericrasch/pen/Irlpm


學妹：「我不太確定加 span 行不行，因為要考慮到用戶不會 html ，用戶是用 CMS 更新，如果可以希望只加一個class或直接寫在 h2 標籤就解決會比較好」

我：「也許可以用背景圖片解決，不過這樣文字大小行距必須是固定的，我晚點幫你看看怎麼解決」


以及新屬性的做法
http://jsfiddle.net/6PVPB/

最後採用新屬性應用的做法↓
可以達到學妹的期望，同時也很簡潔，這次討論也同時讓我學了個新的方式。

---
回過頭看，其實可以看出我們在視覺設計轉前端內容時，是如何做的。

• 目的與用途
  文字是可更動(動態) 所以拆出 span 使用。
• 可行性評估
  其他屬於裝飾性可使用偽類或背景邊線進行，樣式結構的拆解 flex 本體是三塊區域。
• 使用者更新、後續維護資料的方式
  影響標籤結構，希望只用一個標籤可以解決!讓使用者用 CMS 更新方便。
• 技術環境
  用戶端最後的裝置、瀏覽器是否可以閱覽這個 CSS 屬性。