CSSで蛍光ペン風のアンダーライン効果 サンプル色々

CSSで蛍光ペン風のアンダーライン効果 サンプル色々

イエロー

太い

ダミーテキストダミーテキストダミーテキスト

HTML
<p>ダミーテキスト<span class="marker-yellow-bold">ダミーテキスト</span>ダミーテキスト</p>
CSS
.marker-yellow-bold {
    font-weight: bold;
    background:linear-gradient(transparent 50%, #ffff66 50%);    
}

細い

ダミーテキストダミーテキストダミーテキスト

HTML
<p>ダミーテキスト<span class="marker-yellow-thin">ダミーテキスト</span>ダミーテキスト</p>
CSS
.marker-yellow-thin {
    font-weight: bold;
    background:linear-gradient(transparent 80%, #ffff66 80%);    
}

ブルー

太い

ダミーテキストダミーテキストダミーテキスト

HTML
<p>ダミーテキスト<span class="marker-blue-bold">ダミーテキスト</span>ダミーテキスト</p>
CSS
.marker-blue-bold {
    font-weight: bold;
    background:linear-gradient(transparent 50%, #ffff66 50%);    
}

細い

ダミーテキストダミーテキストダミーテキスト

HTML
<p>ダミーテキスト<span class="marker-blue-thin">ダミーテキスト</span>ダミーテキスト</p>
CSS
.marker-blue-thin {
    font-weight: bold;
    background:linear-gradient(transparent 80%, #ffff66 80%);    
}

オレンジ

太い

ダミーテキストダミーテキストダミーテキスト

HTML
<p>ダミーテキスト<span class="marker-orange-bold">ダミーテキスト</span>ダミーテキスト</p>
CSS
.marker-orange-bold {
    font-weight: bold;
    background:linear-gradient(transparent 50%, #ffff66 50%);    
}

細い

ダミーテキストダミーテキストダミーテキスト

HTML
<p>ダミーテキスト<span class="marker-orange-thin">ダミーテキスト</span>ダミーテキスト</p>
CSS
.marker-orange-thin {
    font-weight: bold;
    background:linear-gradient(transparent 80%, #ffff66 80%);    
}

グリーン

太い

ダミーテキストダミーテキストダミーテキスト

HTML
<p>ダミーテキスト<span class="marker-green-bold">ダミーテキスト</span>ダミーテキスト</p>
CSS
.marker-green-bold {
    font-weight: bold;
    background:linear-gradient(transparent 50%, #ffff66 50%);    
}

細い

ダミーテキストダミーテキストダミーテキスト

HTML
<p>ダミーテキスト<span class="marker-green-thin">ダミーテキスト</span>ダミーテキスト</p>
CSS
.marker-green-thin {
    font-weight: bold;
    background:linear-gradient(transparent 80%, #ffff66 80%);    
}

ピンク

太い

ダミーテキストダミーテキストダミーテキスト

HTML
<p>ダミーテキスト<span class="marker-pink-bold">ダミーテキスト</span>ダミーテキスト</p>
CSS
.marker-pink-bold {
    font-weight: bold;
    background:linear-gradient(transparent 50%, #ffff66 50%);    
}

細い

ダミーテキストダミーテキストダミーテキスト

HTML
<p>ダミーテキスト<span class="marker-pink-thin">ダミーテキスト</span>ダミーテキスト</p>
CSS
.marker-pink-thin {
    font-weight: bold;
    background:linear-gradient(transparent 80%, #ffff66 80%);    
}

この記事をシェア

Categories

Profile

兵庫県神戸市でWEB/DTPまわりのフリーランスをしています。
当ブログは主に業務で出会った諸々の備忘録です。

イラストスイッチ