テキストの背景に下半分だけ色をつけるハイライト表示

以下の記事で以前紹介しました↓

cssのみで背景にグラデーションを適用する(応用編あり)

タグ：#css#グラデージョン#スタイルシート#もっと早く知りたかった#背景色

linear-gradientですが、他にも便利な使い方があります。

そう、これです。早速コードにいきましょう。

    <style>
    .highlight01 {
        background: linear-gradient( rgba(255, 242, 160, 0)60%, rgba(255, 242, 160, 1)60%, rgba(255, 242, 160, 1));
        padding: 4px;
    }
    </style>

読めばまぁ分かると思いますが、spanで囲んだ範囲の上60%を透明に、下40%を黄色くしています。

汎用クラスとして何色か用意しておけばどこにでも使えて便利ですね。ただし多用は厳禁です。ださいので。