Can someone help me figure out why this code is not working properly?
body {
font-size: 40px;
background-color: black;
}
.fillColor {
color: transparent;
text-decoration: none;
position: relative;
display: block;
font-size: 40px;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: white;
;
}
.fillColor:before {
content: attr(data-hover);
}
.fillColor:after {
content: attr(data-hover);
position: absolute;
color: white;
left: 0;
width: 0;
transition: width 10s;
white-space: nowrap;
}
.fillColor:hover:after {
width: 100%;
}<p class="fillColor" data-hover="HUNG"></p>After removing overflow: hidden from the CSS, my code stopped functioning. I'm not sure why this is happening and any insight would be greatly appreciated.
Could someone explain to me the purpose of using overflow:hidden?