CSSでテキストに蛍光ペン効果を！明るく目立つハイライトスタイルの作り方

.highlight {
    background-color: yellow; /* 蛍光黄色 */
    color: black; /* 文字色を黒に設定 */
    padding: 0.2em 0.4em; /* パディングでテキスト周りに余白を作る */
}

<p>
    通常のテキストと<mark class="highlight">強調されたテキスト</mark>を区別できます。
</p>

.highlight-green {
    background-color: limegreen; /* 明るい緑色 */
    color: navy; /* 濃紺色でコントラストを高める */
    padding: 0.2em 0.4em;
}

.highlight-pink {
    background-color: fuchsia; /* 鮮やかなピンク色 */
    color: white; /* 白色文字 */
    padding: 0.2em 0.4em;
}

.highlight {
    background-color: yellow;
    color: black;
    padding: 0.2em 0.4em;
    font-weight: bold; /* フォントを太く */
    font-size: 1.2em; /* フォントサイズを大きく */
}