問題 × 解決策

CSSで太さ、色の自由なテキストの下線を実現する方法

問題

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はこちら

テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

5 × one =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧