The Big List of Link/Hover Styles

dabblet.css

.link-list { font-size: 20px; font-family: Georgia, san-serif; padding: 0 0 0 100px; line-height: 40px; color: #555; }

.link-list a:link, a:visited { color: darkblue; }

.link-list li:nth-of-type(2) a { text-decoration: none; }
.link-list li:nth-of-type(2) a:hover { text-decoration: underline; }

.link-list li:nth-of-type(3) a { }
.link-list li:nth-of-type(3) a:hover { text-decoration: none; }

.link-list li:nth-of-type(4) a { }
.link-list li:nth-of-type(4) a:hover { color: #E06C1F; text-decoration: none; }

.link-list li:nth-of-type(5) a {  }
.link-list li:nth-of-type(5) a:hover { color: #E06C1F; }

.link-list li:nth-of-type(6) a { border-bottom: dashed 1px; text-decoration: none; }
.link-list li:nth-of-type(6) a:hover { border-bottom: solid 1px; }

.link-list li:nth-of-type(7) a { border-bottom: solid 1px; text-decoration: none; }
.link-list li:nth-of-type(7) a:hover { border-bottom: dashed 1px; }

.link-list li:nth-of-type(8) a { text-decoration: none; }
.link-list li:nth-of-type(8) a:hover { color: #e06c1f; }

.link-list li:nth-of-type(9) a { text-decoration: none; padding: 1px 3px; }
.link-list li:nth-of-type(9) a:hover { background: #ccc; }

.link-list li:nth-of-type(10) a { border-bottom: solid 1px; text-decoration: none; }
.link-list li:nth-of-type(10) a:hover { border-bottom: dotted 1px; }

.link-list li:nth-of-type(10) a { border-bottom: dotted 1px; text-decoration: none; }
.link-list li:nth-of-type(10) a:hover { border-bottom: solid 1px; }

.link-list li:nth-of-type(11) a { text-decoration: none; }
.link-list li:nth-of-type(11) a:hover { 
	-webkit-background-clip: text;
	color: white;
	-webkit-text-fill-color: transparent;
  	background-image: -webkit-gradient(linear, left top, right top, from(#ea8711), to(#d96363));
	background-image: -webkit-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79); 
	background-image:    -moz-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79);
	background-image:     -ms-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79); 
	background-image:      -o-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79);
 }

.link-list li:nth-of-type(12) a { text-decoration: none; }
.link-list li:nth-of-type(12) a:hover { text-decoration: overline; }

.link-list li:nth-of-type(13) a { text-decoration: none; }
.link-list li:nth-of-type(13) a:hover { text-decoration: overline underline; }

.link-list li:nth-of-type(14) a { text-decoration: none; }
.link-list li:nth-of-type(14) a:hover { border-bottom: solid 1px; border-top: solid 1px; }

.link-list li:nth-of-type(15) a { text-decoration: none; border: solid 1px transparent; padding: 1px; }
.link-list li:nth-of-type(15) a:hover { border: solid 1px; }

.link-list li:nth-of-type(16) a { background: #ccc; text-decoration: none; padding: 1px 3px; }
.link-list li:nth-of-type(16) a:hover { background: #e06c1f; color: white; }

.link-list li:nth-of-type(17) a { -webkit-transition: color .4s linear; -moz-transition: color .4s linear; -ms-transition: color .4s linear; -o-transition: color .4s linear; transition: color .4s linear; }
.link-list li:nth-of-type(17) a:hover { color: #e06c1f; }

.link-list li:nth-of-type(18) a { text-decoration: none; }
.link-list li:nth-of-type(18) a:hover { font-weight: bold; }

.link-list li:nth-of-type(19) a { text-decoration: none; }
.link-list li:nth-of-type(19) a:hover { text-decoration: line-through; }

.link-list li:nth-of-type(20) a { text-decoration: none; }
.link-list li:nth-of-type(20) a:hover { font-style: italic; }

.link-list li:nth-of-type(21) a { text-decoration: none; }
.link-list li:nth-of-type(21) a:hover { font-variant: small-caps; }

.link-list li:nth-of-type(22) a { text-decoration: none; }
.link-list li:nth-of-type(22) a:hover { text-shadow: 2px 2px 2px #aaa; }

.link-list li:nth-of-type(23) a { text-decoration: none; border-radius: 10px; padding: 2px 5px 5px 5px; }
.link-list li:nth-of-type(23) a:hover { background: #ccc; }

.link-list li:nth-of-type(24) a { text-decoration: none; }
.link-list li:nth-of-type(24) a:hover:after { content: " (" attr(href) ") "; }

.link-list li:nth-of-type(25) a { background: #ccc; text-decoration: none; padding: 1px 3px; border-bottom: dashed 1px #777; }
.link-list li:nth-of-type(25) a:hover { background: #e06c1f; color: white; border-bottom: dashed 1px black; }

dabblet.html

<ol class="link-list">
	<li>This is a <a href="#">plain nothing happens on hover</a> link.</li>
	<li>This is an <a href="#">underline on hover</a> link.</li>
	<li>This is a <a href="#">remove underline on hover</a> link.</li>
	<li>This is a <a href="#">change color and remove underline on hover</a> link.</li>
	<li>This is a <a href="#">change color on hover</a> link.</li>
	<li>This is a <a href="#">dashed bottom border changes to solid</a> link.</li>
	<li>This is a <a href="#">solid bottom border changes to dashed</a> link.</li>
	<li>This is a <a href="#">no underline change color on hover</a> link.</li>
	<li>This is a <a href="#">change background color on hover</a> link.</li>
	<li>This is a <a href="#">dotted bottom border changes to solid</a> link.</li>
	<li>This is a <a href="#">rainbow colored text on hover</a> link.</li>
	<li>This is an <a href="#">overline on hover</a> link.</li>
	<li>This is an <a href="#">underline and overline on hover</a> link.</li>
	<li>This is a <a href="#">top and bottom border on hover</a> link.</li>
	<li>This is a <a href="#">solid border on all sides</a> link.</li>
	<li>This is a <a href="#">background and text color changes on hover</a> link.</li>
	<li>This is a <a href="#">color change with transition on hover</a> link.</li>
	<li>This is a <a href="#">bold text on hover</a> link.</li>
	<li>This is a <a href="#">line-through on hover</a> link.</li>
	<li>This is an <a href="#">italics on hover</a> link.</li>
	<li>This is a <a href="#">small-caps on hover</a> link.</li>
	<li>This is a <a href="#">text shadow on hover</a> link.</li>
	<li>This is a <a href="#">background color with rounded corners on hover</a> link.</li>
	<li>This is a <a href="http://www.google.com">URL appears on hover </a> link.</li>
	<li>This is a <a href="#">background color plus dotted bottom border</a> link.</li>
</ol>

settings.json

{"view":"split-vertical","prefixfree":"1","page":"css"}