border-bottom 的效果疑問

想請問端傳媒網站右側的熱門頭條、編輯推薦
還有下方的延伸閱讀
在標題後面都有出現灰色的底線

ex: https://theinitium.com/article/20160826-dailynews-estonian-ecitizen/

我用了border-bottom
不過會出現整條底線 (請看我的hw)

https://jsfiddle.net/hvoxyecL/10/

沒辦法像原文網站那樣只出現在標題後面
想問那是怎麼做到的呢?

發問時間:2016-08-27 12:13
阿川先生
54

此問題由我Email轉錄至此。得到回答後將轉貼給原發問者 – 阿川先生 12:20
新增推文
發問注意事項
  • 一次問一個問題。多個問題請分多次發問
  • 請盡量清楚描述您的問題
  • 請描述您做過哪些嘗試、試過哪些方法
  • 請盡可能地提供細節,幫回答者節省時間

2 個回答

0
看了一下,是在熱門頭條、編輯推薦那邊用span標籤包起來

做法

<span class="side">熱門頭條</span>

CSS部份:

span.side{border-bottom:2px solid #fff ;padding:0px 0px 5px 15px;}

修改
div.side_title{ font-weight:bold; display:block; border-bottom:2px solid #dddddd; padding:15px 0px 5px 0px;margin-bottom:20px;}

修改div的原因是你div的內邊距有設定,這樣的話 span的下邊線不會吃掉左右div的內邊距

改用span的內邊距來增加比較好看,解釋的有點爛,希望你看得懂 



回答時間:2016-08-27 13:34
Hydra
36

新增推文

0
主要是利用重疊的小技巧,上層蓋住下層的 border,達到設計上的要求。
附上原網頁的上色圖 : https://www.dropbox.com/s/m3m15ppkfurudqp/borderbottom.png?dl=0

實作的部份,就保留給你去嘗試囉。

回答時間:2016-08-28 14:20
Kerwin
24

新增推文