在文字底下加底線色塊（像螢光筆畫重點線）

原本在我自己的blog中有加入這個效果，現在改版就不再使用
可以看一下最下方的示意圖

【HTML】

<div>

    <p><strong>文字</strong></p>

</div> 

【CSS語法】

div p strong { background-image: linear-gradient(90deg, #dbc477 0%, #dbc477 50%, rgba(219, 196, 119, 1) 50%, rgba(219, 196, 119, 1) 100%);

    background-size: 200% 0.5em;

    background-position: 100% bottom;

    background-repeat: no-repeat;}

【說明】

這裡主要是在文字底下加入背景色，並透過「透明底色」+「有顏色底色」的漸層設定，來達到像是底線色塊的效果，就像是用螢光筆畫重點線的感覺。

顏色的色碼就請自行更換，另外想要修改底線的高度和大小，可以從 background-position 和 background-size 這兩個地方下手。

【示意圖】