html - 为什么内容会从容器中挤出来？

Question

我想为某些文本下的下划线设置动画。这是解决方案。

h2 > a {
  position: relative;
  color: #000;
  text-decoration: none;
}

h2 > a:hover {
  color: #000;
}

h2 > a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}
h2 > a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

<h2>
<a href=''>Home</a>
</h2>

摆弄了一下，卡住了。

我将 h2 > a:before {} 中的内容属性从“”更改为“x”，将高度属性从 2px 更改为 15px，并在框周围添加了一些背景色以进行调试。

据我们所知，自 <a></a>标签是一个内联元素，它生成一个包含“Home”文本的 block 框。在 css 中，我们使用 h2 > a:before {} 在“Home”之前添加一些文本，这将创建一个匿名 block 框，其中包含我们在上下文属性“x”中定义的文本。 (由于匿名 block 框使用绝对位置，所以它会与“Home”文本重叠。)当我将高度从15px更改为2px时，我知道包含文本“x”的匿名 block 框无法容纳“x” "因为匿名 block 框的高度很短。

如果匿名 block 框太短，我不知道它的高度如何定位文本“x”。

w3c 推荐的任何部分或 MDN 网络文档或任何其他可以回答问题的引用资料？？？

h2 > a {
  position: relative;
  color: #000;
  text-decoration: none;
  background-color:grey;
}

h2 > a:hover {
  color: #000;
}

h2 > a:before {
  
  content: "x";
  position: absolute;
  width: 100%;
  height: 15px;
  bottom: 0;
  left: 0;
  background-color:orange;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}
h2 > a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  background-color:red;
}

<h2>
<a href=''>Home</a>
</h2>

Answer 1

是的，溢出。 - @Temani Afif