Hover effects

dabblet.css

/**
 * Hover effects
 */

body {
	font-family: Arial, sans-serif;
}

#list {
	list-style-type: none;
}

#list li {
	float: left;
	padding: 0 10px;
}

#list li:after {
	background: #fff;
	content: "";
	display: block;
	height: 0px;
	margin-top:15px;
	transition: all .3s ease-out;
	width: 100%;
}

#list li:hover:after {
	background: red;
	height: 4px;
	margin-top: 5px;
}

#list li a {
	color: #282c3f;
	display: block;
	text-decoration: none;
}

#list li a:hover {
	color: #ed6373;
}

dabblet.html

<ul id="list">
<li><a href="#">Lorem</a></li>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Dolor</a></li>
<li><a href="#">Sit</a></li>
<li><a href="#">Amet</a></li>
</ul>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}