Probably not a great use of my time. Anyways…
Hover over me
how
I make use of the characters ̮ & ̯. The former populates the content attribute of the elem’s :before pseudo-element. The latter populates its :after, which also has a slight left and bottom offset. As for the animation, the pseudo-elements simply have a left transition on :hover.
ye be warned
The viable use-cases for this code are extremely limited because:
- it renders slightly differently in different browsers. Safari looks pretty meh.
- won’t support text of arbitrary length
- won’t support animation of arbitrary duration
- won’t change thickness relative to elem’s font-size
- will not line-wrap
the code
here’s a jsfiddle.
html
<div class='squiggle'>this will have a squiggly underline</div>
CSS
.squiggle {
position:relative;
overflow:hidden;
padding-bottom:5px;
display:inline-block;
vertical-align:top;
cursor:pointer;
}
.squiggle:before, .squiggle:after{
position:absolute;
font-family:monospace;
font-size:19px;
color:inherit;
letter-spacing:1px;
bottom:0;
left:0;
transition:none;
word-break:break-all;
}
.squiggle:before {
content: "\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004\032E\2004";
}
.squiggle:after {
content: "\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004\032F\2004";
left:6px;
bottom:1px;
}
.squiggle:hover:after{
left:-100px;
transition:left 7s linear;
}
.squiggle:hover:before{
left:-106px;
transition:left 7s linear;
}