想請問端傳媒網站右側的熱門頭條、編輯推薦 還有下方的延伸閱讀 在標題後面都有出現灰色的底線 ex: https://theinitium.com/article/20160826-dailynews-estonian-ecitizen/ 我用了border-bottom 不過會出現整條底線 (請看我的hw) https://jsfiddle.net/hvoxyecL/10/ 沒辦法像原文網站那樣只出現在標題後面 想問那是怎麼做到的呢?
看了一下,是在熱門頭條、編輯推薦那邊用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的內邊距來增加比較好看,解釋的有點爛,希望你看得懂
主要是利用重疊的小技巧,上層蓋住下層的 border,達到設計上的要求。 附上原網頁的上色圖 : https://www.dropbox.com/s/m3m15ppkfurudqp/borderbottom.png?dl=0 實作的部份,就保留給你去嘗試囉。