コニファ・ロゴ

ツール集:svg画像を使い、手書き風アンダーラインでテキストを強調

CSSのみで、svg画像を使い、手書き風の色付きアンダーラインでテキストを強調します。サンプルは、h1要素およびp要素に内包するstrong要素で囲んだテキスト部分にsvgアンダーラインを適用しています。

使用したsvg画像の手書き風アンダーライン(筆者のオリジナルです)

サンプル

ダミーテキスト(h1要素):svg画像を使い、手書き風アンダーラインで、テキストを強調します。

ダミーテキスト(p要素):吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

サンプルのhtmlソース

  1. <h1>ダミーテキスト(h1要素):svg画像を使い、手書き風<strong>アンダーライン</strong>で、テキストを
  2. <strong>強調</strong>します。</h1>
  3. <p>ダミーテキスト(p要素):<strong>吾輩は猫である</strong>。名前はまだ無い。どこで生れたかとんと見当が
  4. つかぬ。何でも薄暗いじめじめした所で<strong>ニャーニャー</strong>泣いていた事だけは記憶している。</p>

サンプルのCSSソース

  1. .main strong {
  2. position: relative;
  3. }
  4. .main strong::after {
  5. content: '';
  6. position: absolute;
  7. bottom: -0.4rem;
  8. left: -0.5rem;
  9. right: -0.5rem;
  10. height: 0.6rem;
  11. z-index: -1;
  12. background-image: url("underline223.svg");
  13. background-repeat: none;
  14. background-size: cover;
  15. }
  16. .main p > strong, .main h1 > strong {
  17. font-weight: 400;
  18. }
  19. .main p > strong::after {
  20. bottom: -0.2rem;
  21. height: 0.5rem;
  22. left: -0.25rem;
  23. right: -0.25rem;
  24. }

 

 

戻るボタン