如果父對象溢出，則使：after元素擴展到全寬

Question

我在菜單上使用與此類似的東西-現實中的紅線具有圖像背景，應在整個內容下划線或使用完整寬度。

在大屏幕上工作正常，但在小屏幕（此處通過設置寬度模擬）上，紅線在實際內容之前結束。

有什么辦法可以使其擴展到整個寬度？

（我可以使用javascript（甚至是jquery），但我不想這樣做）

 .outer { font-size: 16pt; } .menu { width: 100%; overflow-x: auto; white-space: nowrap; position:relative; } .menu:after { content:''; background-color:red; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; } 

 <div class="outer"> <div class="menu"> This is on desktop and everything is fine. </div> </div> <div class="outer" style="width: 200px"> <div class="menu"> This is on phone, the content overflows as you can see. </div> </div> 

Answer 1

您可以使用媒體查詢來僅定位移動設備並重置CSS（將200像​​素替換為移動屏幕分辨率，通常為480像素）：

@media screen and (max-width: 200px) {

  .menu {
      overflow-x: initial;
      white-space: normal;
  }

}

Answer 2

我可能為您解決一個簡單的問題：設置邊框並刪除after元素。

.menu {
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    position:relative;
    border-bottom:2px solid red;
}

http://jsfiddle.net/ex0p6thd/