Why content squeezed out of the containing box? - html

Question

I want to animate the underline under some texts. Here's the solution.
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>
After fiddling with it, I got stuck.
I changed content attribute in h2 > a:before {} from "" to "x" and height attribute from 2px to 15px, and added some background color around boxes for debugging.
As we know since <a></a> tag is an inline element and it generates a block box that contains the "Home" text. and in the css, we used h2 > a:before {} to add some text before "Home", which will create a anonymous block box which contains the text as we defined in context attr "x". (Since the anonymous block box used absolute position, so it will overlap with "Home" text. ) As I changed the height from 15px to 2px, I know the anonymous block box that contains text "x" is not able to hold "x" since the height of anonymous block box is so short.
I don't how the height of anonymous block box will position the text "x" if it's too short.
Does any part of the w3c recommendation or MDN web docs or any other references that can answer the question ???
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

Yes, overflow. - # Temani Afif