リンクにhoverしたときのエフェクトです。ブルーのアンダーラインのあるテキストがリンクで、hoverするとアンダーラインが立ち上がるように背景をその色でおおいます。カーソルを外すと元に戻ります。

 

サンプル（リンクはダミーです）

 

サンプルのhtmlソース

<div class="sample">
    <p>［サンプルテキスト］インターネットを利用した<a href="javascript:void(0)">BtoB&nbsp;受注システム</a>です（SaaS版、ASP版）。既存の販売管理、基幹システムとのデータ連携が可能です。
        <a href="javascript:void(0)">概要説明、操作マニュアル発注側、管理側</a>を参照してください。
        システムの<a href="javascript:void(0)">資料請求はこちら</a>です。
    </p>
</div>

サンプルのCSSソース

.sample a {
    display: inline-block;
    position: relative;
    color: #333333;
    text-decoration: none;
    padding: 5px 0.5em;
    line-height:1.4;
    border-bottom: 2px solid #48e;
    }
.sample a:hover {
    color: #efefef;
    }
.sample a:after {
    content: '';
    display: block;
    position: absolute;
    top: 100%;
    right: 0;
    bottom: 0;
    left: 0;
    background: #48e;
    z-index: -1;
    transition: all 0.2s cubic-bezier(0, 0.59, 1, 0.26);
    }
.sample a:hover:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #48e;
    z-index: -1;
    }