今回は「span」タグを使用しテキストの一部を装飾するCSSを紹介します。
一部の文字を強調表示したい場合などにご活用ください
HTML
<p>文字を<span>装飾</span>する</p>
背景を入れる
span{
background-color:#333;
color:#fff;
}
下線を入れる
span{
text-decoration:underline;
}
少し太くした点線を入れる
span{
text-decoration:
underline dotted 5px;
}
色を付けた波線を入れる
span{
text-decoration:
underline wavy #4eb4e0;
}
打消し線を入れる
span{
text-decoration:
line-through 5px #e8467f;
}
上下に破線を入れる
span{
text-decoration:
dashed underline overline 5px;
}
文字の上に斜め線を入れる
span{
-webkit-text-emphasis: double-circle #c699e3;
text-emphasis: double-circle #c699e3;
}
文字の上に二重丸を入れる
span{
-webkit-text-emphasis:
double-circle #c699e3;
text-emphasis:
double-circle #c699e3;
}
蛍光ペン風の下線を入れる
span{
background:
linear-gradient(transparent 60%, #FFFE03 60%);
}