Danya Lette

Pure CSS Animated Squiggle Underline

animation css

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;  
}