<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.