计算 100% 应用于 div，而不是 h2

Question

我正在尝试在 h2 下创建黄色阴影，如下所示：

然而，我得到的是：

我看到源代码使用 calc 100% 来获取 :after 元素的宽度。

ul li a h3:after {
width: calc(100% + 30px);
display: block;
content: '';
background: #fbf36d;
margin-top: -0.7rem;
margin-left: -10px;
height: 0.8rem;
position: absolute;
z-index: -1;
transition: all 0.3s ease-out;

}

下面是我的代码片段。

.thing h2 {
  position: relative;
}

.thing h2:after {
  content: "";
  width: 100%;
  background: #fbf36d;
  margin-top:-0.7rem;
  margin-left: 5px;
  height: 0.8rem;
  position: absolute;
  z-index: -1;
  transition: all 0.3s ease-out;
  display: block;
}

  <div class="thing">
    <h2>Here is the title</h2>
    <p>I just don't get it, why the 100% width is applied to the div, instead of h2. Amazing.</p>
  </div>

据说我错过了什么。有什么想法吗？

Answer 1

您需要将 h2 作为内联块。 h2 通常与 div 相同 - 这意味着它是 100% 宽。

如果将其设为内嵌块，它只会占用所需的宽度。

.thing h2 {
  position: relative;
  display:inline-block;
}

.thing h2:after {
  content: "";
  width: 100%;
  background: #fbf36d;
  margin-top:-0.7rem;
  margin-left: 5px;
  height: 0.8rem;
  position: absolute;
  z-index: -1;
  transition: all 0.3s ease-out;
  display: block;
}

<div class="thing">
    <h2>Here is the title</h2>
    <p>I just don't get it, why the 100% width is applied to the div, instead of h2. Amazing.</p>
  </div>

Answer 2

我认为您指的问题是 h2 当前显示为其容器的 100% 宽度（div）。尝试将 h2 设置为 display: inline-block;。这应该可以解决您的问题。

计算 100% 应用于 div，而不是 h2

Calc 100% is applied to div, instead of h2

html

css

calc