firefox 中“顯示：內聯”的替代方法是什么？

Question

我在 HTML 和 CSS 中創建了一個響應式動態元素。請查看下面的屏幕截圖以查看該元素的一般視圖。 這包含標題和絕對定位的形狀。

以下是您可以參考的代碼行

 .main-heading { font-size: 75px; margin-bottom: 40px; position: relative; z-index: 1; display: inline; }.main-heading.content { position: relative; z-index: 1; }.main-heading.after { width: 100%; height: 15px; background-color: #FDDB3A; position: absolute; left: 0; bottom: 12px; z-index: 0; bottom: 10px; left: 0; }

 <h2 class="main-heading"> <span class="content">Reasons Why People Choose Us</span> <span class="after"></span> </h2>

正如您在代碼片段中看到的那樣，

之后的形狀完全適合最后一行的寬度

這是因為display: inline 。 但不幸的是，這在 firefox 中表現不佳。下面是 firefox 瀏覽器中的屏幕截圖（拉伸 window 並查看問題）

我可以嘗試在所有現代瀏覽器中使用相同的替代方法是什么？

我只想在 HTML 和 CSS 中完成這項工作，NO JAVASCRIPT。因為這是在 ELEMENTOR 中創建的帶有樣式控件的自定義小部件。

Answer 1

使用display: inline-block代替，它的行為就像一個塊和一個內聯元素。 您當前所擁有的內容不起作用，因為.main-heading不能用作 position 的引用.after元素，因為它不是塊元素。

 .main-heading { font-size: 75px; margin-bottom: 40px; position: relative; z-index: 1; display: inline-block; }.main-heading.content { position: relative; z-index: 1; }.main-heading.after { width: 100%; height: 15px; background-color: #FDDB3A; position: absolute; left: 0; bottom: 12px; z-index: 0; bottom: 10px; left: 0; }

 <h2 class="main-heading"> <span class="content">Reasons Why People Choose Us</span> <span class="after"></span> </h2>

Answer 2

這是你想要的？

 .main-heading { font-size: 60px; font-family: verdana; line-height: 60px; font-weight: bold; position: relative; }.main-heading::after { position: absolute; content: ''; height: 15px; width: 100%; left: 0; background: #FDDB3A; bottom: 5px; z-index: -1; }

 <h2 class="main-heading">Reasons Why People Choose Us</h2>

Answer 3

由於沒有找到合適的答案，我設法寫了 CSS 僅針對 firefox，如下所示，

@-moz-document url-prefix() {
  .main-heading span {
      display: inline-block;
  }
}