I'm looking for a solution to ensure that the border-based cursor stops at the end of the animated text rather than reaching the edge of the window. I have experimented with setting the width of the container and adjusting the text width, but since this will be used with variable widths, those solutions are not ideal.
<div class="type">
<h1>We have some basic text here</h1>
</div>
body { background: #333; font-family: "Lato"; color: #fff; }
div.type {
text-align: center;
color: #fff;
white-space: nowrap;
}
.type h1 {
overflow: hidden;
border-right: .05em solid #aaa;
width: auto;
text-align: center;
margin: 0 auto;
animation:
type 5s steps(100, end)
}
@keyframes type {
from { width: 0; }
to { width: 100%; }
}