text-decorationでマーカーを引く方法

HTML

Copy Code

<span class="marker">マーカー</span>

CSS

Copy Code

.marker {
  line-height: 1.6; /* 無くても良い */
  background-image:
    linear-gradient(transparent 60%, #ff6 0%);
}

CSS

Copy Code

.marker {
  background-image:
    linear-gradient(transparent 61%, #ff6 61%, #ff6 85%, transparent 85%);
}

HTML

Copy Code

<mark class="marker">マーカー</mark>

CSS

Copy Code

.marker {
  text-decoration-line: underline;
  text-decoration-color: #ff6;
  text-decoration-thickness: 14px;
  text-decoration-skip-ink: none;
  text-underline-offset: -4px;
  background-color: unset; /* デフォルトの背景を削除 */
}