テキストに下線を引く

重要ポイントはすべて赤字になんてセンスないので、下線とかで対応する。「text-decoration」を使って代表的なパターンをメモしておく。

実線：solid

上記月額利用料に加え月額料金300円（税込330円）がかかりますのでご注意ください。

<div>
上記月額利用料に加え<span class="warning05">月額料金300円（税込330円）</span>がかかりますのでご注意ください。
</div>

.warning05 {
text-decoration: underline solid;
text-decoration-color: #333; 
}

波線：wavy

上記月額利用料に加え月額料金300円（税込330円）がかかりますのでご注意ください。

<div>
  上記月額利用料に加え<span class="warning01">月額料金300円（税込330円）</span>がかかりますのでご注意ください。
</div>

.warning01 {
text-decoration: underline wavy;
text-decoration-color: #333; 
}

二重線：double

上記月額利用料に加え月額料金300円（税込330円）がかかりますのでご注意ください。

<div>
  上記月額利用料に加え<span class="warning02">月額料金300円（税込330円）</span>がかかりますのでご注意ください。
</div>

.warning02 {
text-decoration: underline double;
text-decoration-color: #333; 
}

ドット：dotted

上記月額利用料に加え月額料金300円（税込330円）がかかりますのでご注意ください。

<div>
 上記月額利用料に加え<span class="warning03">月額料金300円（税込330円）</span>がかかりますのでご注意ください。
</div>

.warning03 {
text-decoration: underline dotted;
text-decoration-color: #333; 
}

点線：dashed

上記月額利用料に加え月額料金300円（税込330円）がかかりますのでご注意ください。

<div>
 上記月額利用料に加え<span class="warning04">月額料金300円（税込330円）</span>がかかりますのでご注意ください。
</div>

.warning04 {
text-decoration: underline dashed;
text-decoration-color: #333; 
}

蛍光ペン：backgroundにlinear-gradientで色

上記月額利用料に加え月額料金300円（税込330円）がかかりますのでご注意ください。

<div>
 上記月額利用料に加え<span class="warning06">月額料金300円（税込330円）</span>がかかりますのでご注意ください。
</div>

.warning06 {
background:linear-gradient(transparent 50%, #ffff66 0%); 
}

NOTICES

MEMORANDUM