CSSのみで、リンクテキストを一文字ずつboldにするhoverエフェクトです。次のサンプル（大きめのテキスト）のリンクテキスト「Conifer」にhoverすると、一文字ずつboldになっていきます。hoverを外すと同じく一文字ずつ戻ります。

 

 

サンプルのhtmlソース

<div class="wrapper">
  <div class="inner">
    システム開発の <a href="" class="hover-shadow hover-color">
    <span>C</span><span>o</span><span>n</span><span>i</span><span>f</span><span>e</span><span>r</span>	
    </a>
  </div>
</div>

サンプルのCSSソース

a {
  color: #000;
  text-decoration: none;
}
a span {
  font-weight: 100;
  transition: all .5s;
  border-bottom: 1px solid;
}
a span:nth-child(2) {
  transition-delay: .1s;
}
a span:nth-child(3) {
  transition-delay: .2s;
}
a span:nth-child(4) {
  transition-delay: .2s;
}
a span:nth-child(5) {
  transition-delay: .3s;
}
a span:nth-child(6) {
  transition-delay: .3s;
}
a span:nth-child(7) {
  transition-delay: .3s;
}
a:hover span {
  font-weight: 800;
}
a:hover span:nth-child(7) {
  transition-delay: .3s;
}
a:hover span:nth-child(6) {
  transition-delay: .3s;
}
a:hover span:nth-child(5) {
  transition-delay: .3s;
}
a:hover span:nth-child(4) {
  transition-delay: .3s;
}
a:hover span:nth-child(3) {
  transition-delay: .2s;
}
a:hover span:nth-child(2) {
  transition-delay: .1s;
}
a:hover span:nth-child(1) {
  transition-delay: 0s;
}
a.hover-shadow:hover {
  text-shadow: 1px 1px 0px #ddd, 2px 2px 0px #ddd, 3px 3px 0px #ddd;
}
a.hover-color:hover {
  border-color: darkmagenta;
}