<div class="l-content">
<div class="l-content__section">
<h2 class="c-title">1234567891012345678910</h2>
</div>
<div class="l-content__section">
<h2 class="c-title">12345678910</h2>
</div>
<div class="l-content__section">
<h2 class="c-title">12</h2>
</div>
</div>
* {
margin: 0;
padding: 0;
}
body {
padding: 2%;
box-sizing: border-box;
}
.l-content {
display: grid;
gap: 16px 0;
}
.c-title {
display: inline-block;
white-space: nowrap;
position: relative;
}
.c-title::after {
display: block;
content: "";
width: 100%;
height: 1px;
background-color: #000;
transform: scaleX(0);
transform-origin: center left;
animation: bar 4s linear forwards;
position: absolute;
bottom: 1px;
left: 0;
}
@keyframes bar {
0% { transform: scaleX(0); }
100% { transform: scaleX(1); }
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.