<article lang="ja">
  <h1>ins, del要素の意味を表すよりよい見た目を考える</h1>
  <h2>デフォルトの表示</h2>
  <p>ins 要素は<ins>追加</ins>を意味します。</p>
  <p>del 要素は<del>削除</del>を意味します。</p>

  <h2>他の表現案</h2>
  <p>
    ins 要素の<ins class="new">追加</ins>をより表せる見た目
  </p>
  <p>
    del 要素の<del class="new">削除</del>をより表せる見た目
  </p>
</article>
ins.new {
  text-decoration: initial;
  background-color: lightgreen;
}
ins.new::before {
  content: "+";
}

del.new {
  text-decoration: initial;
  background-color: lightpink;
}
del.new::before {
  content: "−";
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.