Link Underline

by denvdmj

HTML

<p>Чаще всего то, что <a href="#">часто отсутствует</a> в динамических языках, в результате и повышает расходы в сопровождении больших программ.</p>

<p class="v1">Чаще всего то, что <a href="#">часто отсутствует</a> в динамических языках, в результате и повышает расходы в сопровождении больших программ.</p>

<p class="v2">Чаще всего то, что <a href="#">часто отсутствует</a> в динамических языках, в результате и повышает расходы в сопровождении больших программ.</p>

<p class="v3">Чаще всего то, что <a href="#">часто отсутствует</a> в динамических языках, в результате и повышает расходы в сопровождении больших программ.</p>

CSS

:root {
  font: 18px/135% Verdana;
  cursor: default;
}

[class^="v"] a[href] {
  color: #449;
  text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 2px 0 0 #fff, -2px 0 0 #fff;
}
[class^="v"] a[href]:hover {
  color: #a00;
}


.v1 a[href] {
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
.v1 a[href]:before {
  position: absolute;
  z-index: -1;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: #00c;
  content: "";
}
.v1 a[href]:hover:before {
  background: #faa;
}

.v2 a[href] {
  text-decoration: none;
  background: linear-gradient(0deg, #00c, #00c) 0 100% repeat-x;
  background-size: 100% 1px;
}
.v2 a[href]:hover {
  background-image: linear-gradient(0deg, #faa, #faa);
}

.v3 a[href] {
  text-decoration: none;
  box-shadow: inset 0 -1px 0 0 #00c;
}
.v3 a[href]:hover {
  box-shadow: inset 0 -1px 0 0 #faa;
}