コニファ・ロゴ

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

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

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

サンプル

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

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

サンプルのhtmlソース

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

サンプルのCSSソース

.main strong {
    position: relative;
}
.main strong::after {
    content: '';
    position: absolute;
    bottom: -0.4rem;
    left: -0.5rem;
   right: -0.5rem;
   height: 0.6rem;
   z-index: -1;
   background-image: url("underline223.svg");
   background-repeat: none;
   background-size: cover;
}
.main p > strong, .main h1 > strong {
   font-weight: 400;
}
.main p > strong::after {
   bottom: -0.2rem;
   height: 0.5rem;
   left: -0.25rem;
   right: -0.25rem;
}

 

 

戻るボタン