マーカー風・アンダーライン風のラインを引くcss

LPの作成などによく使われるマーカーや、アンダーライン風のラインを引くCSSをサンプルしてみます。

今年もよろしくお願いします

<span class="marker1">今年もよろしくお願いします</span>

.marker1 {
    background: linear-gradient(transparent 0%, #FFFF00 0%);
    font-weight: bold;
}

今年もよろしくお願いします

<span class="marker2">今年もよろしくお願いします</span>

.marker2 {
 background: linear-gradient(transparent 50%, ##FFFF00 0%);
font-weight: bold; 
}

今年もよろしくお願いします

<span class="marker3">今年もよろしくお願いします</span>

.marker3 {
 background: linear-gradient(transparent 70%, ##FFFF00 0%);
font-weight: bold; 
}

今年もよろしくお願いします

<span class="marker4 ">今年もよろしくお願いします</span>

.marker4 {
 background: linear-gradient(transparent 80%, ##FFFF00 0%);
font-weight: bold; 
}

今年もよろしくお願いします

<span class="marker5">今年もよろしくお願いします</span>

.marker5 {
 background: linear-gradient(transparent 90%, ##FFFF00 0%);
font-weight: bold; 
}

蛍光グリーン

今年もよろしくお願いします

<span class="marker6">今年もよろしくお願いします</span>

.marker6 {
background: linear-gradient(transparent 50%, #bbff6ae0 0%);
font-weight: bold; 
}

今年もよろしくお願いします

<span class="marker7">今年もよろしくお願いします</span>

.marker7 {
background: linear-gradient(transparent 60%, #bbff6ae0 0%);
font-weight: bold; 
}