<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="https://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>
.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; }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.