【文字】文字を強調するテクニック18選（CSS 1〜2行でできます）

<p>いつもの文章の、<span class="em_01">ここを強調</span>します。</p>

/* ---------- 01 マーカー（下半分） ---------- */
.em_01 { background: linear-gradient(transparent 60%, #e8dc6a 60%); }

<p>いつもの文章の、<span class="em_02">ここを強調</span>します。</p>

/* ---------- 02 マーカー（太め・うすく） ---------- */
.em_02 { background: linear-gradient(transparent 35%, rgba(232, 220, 106, .55) 35%); }

<p><span class="em_03">マウスを乗せる</span>と、線が引かれます。</p>

/* ---------- 03 マーカーを引く（マウスを乗せると） ---------- */
.em_03 { background: linear-gradient(transparent 60%, #e8dc6a 60%) no-repeat 0 0 / 0 100%; transition: background-size .6s; }
.em_03:hover { background-size: 100% 100%; }

@media (prefers-reduced-motion: reduce) {
  .em_03 { transition: none; }
}

<p>いつもの文章の、<span class="em_04">ここを強調</span>します。</p>

/* ---------- 04 ななめのしましまマーカー ---------- */
.em_04 { background: linear-gradient(transparent 60%, transparent 60%), repeating-linear-gradient(-45deg, #e8dc6a 0 2px, transparent 2px 5px) 0 100% / 100% 40% no-repeat; }

<p>いつもの文章の、<span class="em_05">ここを強調</span>します。</p>

/* ---------- 05 太い下線（すき間あり） ---------- */
.em_05 { text-decoration: underline 3px #e8dc6a; text-underline-offset: 6px; }

<p>いつもの文章の、<span class="em_06">ここを強調</span>します。</p>

/* ---------- 06 点線の下線 ---------- */
.em_06 { text-decoration: underline dotted 2px; text-underline-offset: 6px; }

<p>いつもの文章の、<span class="em_07">ここを強調</span>します。</p>

/* ---------- 07 波線 ---------- */
.em_07 { text-decoration: underline wavy #e8dc6a 2px; text-underline-offset: 5px; }

<p>いつもの文章の、<span class="em_08">ここを強調</span>します。</p>

/* ---------- 08 二重線 ---------- */
.em_08 { text-decoration: underline double; text-underline-offset: 4px; }

<p>いつもの文章の、<span class="em_09">ここを強調</span>します。</p>

/* ---------- 09 まるの下線（ドット） ---------- */
.em_09 { background: radial-gradient(circle, #2b2a27 1.5px, transparent 2px) 0 100% / 8px 6px repeat-x; padding-bottom: 6px; }

<p>いつもの文章の、<span class="em_10">ここを強調</span>します。</p>

/* ---------- 10 傍点（ごまの点） ---------- */
.em_10 { text-emphasis: filled sesame #2b2a27; }

<p>いつもの文章の、<span class="em_11">ここを強調</span>します。</p>

/* ---------- 11 傍点（まる） ---------- */
.em_11 { text-emphasis: open circle #2b2a27; }

<p>いつもの文章の、<span class="em_18">ここを強調</span>します。</p>

/* ---------- 18 下に黄色いまる ---------- */
.em_18 { text-emphasis: filled circle #e8dc6a; text-emphasis-position: under right; }

<p>いつもの文章の、<span class="em_12">ここを強調</span>します。</p>

/* ---------- 12 袋文字 ---------- */
.em_12 { color: #fff; text-shadow: 1.5px 0 #2b2a27, -1.5px 0 #2b2a27, 0 1.5px #2b2a27, 0 -1.5px #2b2a27, 1px 1px #2b2a27, -1px -1px #2b2a27, 1px -1px #2b2a27, -1px 1px #2b2a27; font-weight: 700; }

<p>いつもの文章の、<span class="em_13">ここを強調</span>します。</p>

/* ---------- 13 ずらした影 ---------- */
.em_13 { text-shadow: 2px 2px 0 #e8dc6a; font-weight: 700; }

<p>いつもの文章の、<span class="em_17">ここを強調</span>します。</p>

/* ---------- 17 グラデーションの文字 ---------- */
.em_17 { background: linear-gradient(90deg, #2b2a27, #c9b53a); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; }

<p>いつもの文章の、<span class="em_14">ここを強調</span>します。</p>

/* ---------- 14 墨のベタ ---------- */
.em_14 { background: #2b2a27; color: #fff; padding: .1em .4em; }

<p>いつもの文章の、<span class="em_15">ここを強調</span>します。</p>

/* ---------- 15 まるいバッジ ---------- */
.em_15 { border: 1.5px solid #2b2a27; border-radius: 999px; padding: 0 .6em; }

<p>いつもの文章の、<span class="em_16">ここを強調</span>します。</p>

/* ---------- 16 四角い枠 ---------- */
.em_16 { box-shadow: inset 0 0 0 1.5px #2b2a27; padding: .1em .4em; }