パーツ番号 02-10-17 ・ CSSのみ

オフセットハイライト見出し

蛍光ペンで斜めに引いたようなハイライト帯を文字の背後にずらして重ねるスタイル。ブログの重要ポイント紹介などに使える。

staticcss

プレビュー

ソースコード

HTML

<div class="wrap">
          <span class="hl"></span>
          <h4 class="ttl">オフセット蛍光見出し</h4>
        </div>

CSS

.d02-10-17 .wrap{ position:relative; display:inline-block; }
        .d02-10-17 .hl{ position:absolute; left:-6px; right:-6px; bottom:6px; height:14px; background:#fde047; opacity:.6; transform:rotate(-2deg); z-index:0; }
        .d02-10-17 .ttl{ all:unset; position:relative; z-index:1; display:block; font-size:22px; font-weight:800; color:#1f2937; }

クラス名 .d02-10-17 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。