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 {}中的content属性从“”更改为“ x”，并将height属性从2px更改为15px，并在框周围添加了一些背景色以进行调试。

我们知道，由于<a></a>标签是一个内联元素，它会生成一个包含“主页”文本的阻止框。在CSS中，我们使用h2> a：before {}在“ Home”之前添加一些文本，这将创建一个匿名块框，其中包含我们在上下文属性“ x”中定义的文本。（由于匿名阻止框使用绝对位置，因此它将与“主页”文本重叠。）当我将高度从15px更改为2px时，我知道包含文本“ x”的匿名阻止框无法容纳“ x” ”，因为匿名阻止框的高度非常短。

我不知道匿名块框的高度如何将文本“ x”设置得太短。

w3c建议书或MDN Web文档或任何其他可以回答问题的参考书的任何部分吗？

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

为什么内容从包装盒中挤出？

1 个答案: