text-decoration-skip CSS3

text-decoration-skip は、テキストを装飾しない部分を指定します。（スキップします）

名前	:	text-decoration-skip
値	:	none \| [ objects \|\| spaces \|\| ink \|\| edges \|\| box-decoration ]
初期値	:	objects
適用対象	:	全ての要素
継承	:	する
パーセンテージ	:	n/a
メディア	:	visual（視覚的）
計算値	:	As specified（指定通り）
アニメーション	:	できない

Value（値）

none: スキップしません
objects: 初期値画像かインラインブロックならばスキップする
spaces: 余白（スペースやタブ）をスキップする
ink: グリフ（字形）が描かれている場所をスキップする
edges: 文字の端をスキップする（コンテンツの開始と終了の少し内側をスキップ）
box-decoration: ボックスのマージン、ボーダー、パディングをスキップする

HTML source

<!DOCTYPE html>
<html>
 <head>
  <title></title>
  <style>
   p.test1 { text-decoration-line: underline; text-decoration-skip: none; }
   p.test2 { text-decoration-line: underline; text-decoration-skip: objects; }
   p.test3 { text-decoration-line: underline; text-decoration-skip: spaces; }
   p.test4 { text-decoration-line: underline; text-decoration-skip: ink; }
   p.test5 { text-decoration-line: underline; text-decoration-skip: edges; }
   p.test6 { text-decoration-line: underline; text-decoration-skip: box-decoration; }
  </style>
 </head>
 <body>
   <p class="test1">今日は 	<span style="background: red;">蒸し</span>暑いですね。</p>
   <p class="test2">今日は 	蒸し暑いですね。</p>
   <p class="test3">今日は	蒸し	暑い	ですね。</p>
   <p class="test4">abcdefghijklmnop</p>
   <p class="test5">今日は<i>蒸し</i><i>暑い</i>ですね。</p>
   <p class="test6">今日は<span style="padding: 0 20px; background: red;">蒸し</span>暑いですね。</p>
 </body>
</html>

display

今日は蒸し暑いですね。

abcdefghijklmnop

今日は蒸し暑いですね。