<div >ABCDEFGHIJKLMNOPQ</div>
<!-- <div class="hover">Hover Me</div> -->
<div class="wave">ABCDEFGHIJKLMNOPQ</div>
html,
body {
    width: 100%;
    height: 100%;
    display: flex;
}

div {
    width : 200px;
    height: 200px;
    line-height: 200px;
    font-size: 50px;
    margin: auto;
    text-align: center;
    overflow: hidden;
}

.wave {
    border: 5px solid deeppink;
    border-radius: 50%;
    animation: indent 5s infinite linear;
}

div {
    color: transparent;
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: deeppink;
}

@keyframes indent {
    100% {
        text-indent: -110px;
    }
}

.hover {
    color: deeppink;
    cursor: pointer;
    text-decoration-line: none;
    text-decoration-style: wavy;
    text-decoration-color: deeppink;
}

.hover:hover {
    color: deeppink;
    cursor: pointer;
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: deeppink;
    transition: 1s infinite linear;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.