今作っているホームページで、写真のように、下線をグラデーションにしたくて、色々調べてみました！
もちろん画像を使えばカンタンなのですが・・・それじゃイケてない（>＿<）
きっと今ならcss3でできるはず・・・
というわけでこちらです！
★html★
<h1 class=”grade_border”>ごあいさつ</h1>
★css★
.grade_border {
position: relative;
padding-bottom: 6px;
display: inline-block;
}
.grade_border:before {
content: ”;
position: absolute;
bottom: -10px;
left: 0;
right: 0;
margin: 0 auto;
text-align: center;
background-position: center;
background-repeat: no-repeat;
height: 6px;
background-image: -webkit-linear-gradient(left,#00a1d8,#004995 90%);
background-image: linear-gradient(to right,#00a1d8,#004995 90%);
}
細かいところはよくわかりませんが・・・（＾＿＾；）
これだと、文字と下線の長さが同じになりますが、画面いっぱいに線を引きたい場合は
display: inline-block;
を削除します♪
以上覚書でした（ほぼ自分のための・・・）
それではよい週末を！！