問題
CSSで太さ、色の自由なテキストの下線を実現したい
解決策
「background-image: linear-gradient(始まりの色のコード,終わりの色のコード);」を活用する
自由にCSSで設定できる下線の実現
デフォルトのCSSですと、テキストの下線は「text-decoration: underline;」がありますが、色や太さの調整が出来ません。そこで、代わりに太さや色を自由に設定できるCSSの手法をご紹介します。
まず、マークアップから行います。
例として、spanタグに「ln4」クラスを設定します。
<p>
テキストです。テキストです。テキストです。テキストです。
<span class="ln4">テキストです。</span>テキストです。テキストです。
<span class="ln4">テキストです。テキストです。</span>
テキストです。テキストです。
</p>CSSの構築
「ln4」クラスに対し、 「background-image: linear-gradient(始まりの色のコード,終わりの色のコード);」を設定します。
これで線の土台が出来上がります
後は太さとして「background-size: 1px 4px;」で4pxの太さに設定した上で「repeat-x」で横にのみリピートさせます。
そして線の位置を「bottom 4px left 0」で下部に来るように設定します。
.ln4{
background-size: 1px 4px;
background-repeat: repeat-x;
background-position: bottom 4px left 0;
-webkit-background-image: linear-gradient(#ffdc00,#ffdc00);
-moz-background-image: linear-gradient(#ffdc00,#ffdc00);
-o-background-image: linear-gradient(#ffdc00,#ffdc00);
-ms-background-image: linear-gradient(#ffdc00,#ffdc00);
background-image: linear-gradient(#ffdc00,#ffdc00);
}
DEMOはこちら
テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。
コメント