text-decoration: underline; で文字列に下線を引くことができますが、この下線を色々デコレーションしてみます。

基本の下線

表示サンプル

下線を色々装飾してみます下線を色々装飾してみます下線を色々装飾してみます

CSS記述例

.sample1{
    text-decoration: underline; /*下線*/
}

波下線

表示サンプル

下線を色々装飾してみます下線を色々装飾してみます下線を色々装飾してみます

CSS記述例

.sample2{
    text-decoration: underline wavy; /*波下線*/
}

上下線

表示サンプル

下線を色々装飾してみます下線を色々装飾してみます下線を色々装飾してみます

CSS記述例

.sample3{
    text-decoration: underline overline; /*上下線*/
}

ドット下線

表示サンプル

下線を色々装飾してみます下線を色々装飾してみます下線を色々装飾してみます

CSS記述例

.sample4{
    text-decoration: underline dotted; /*ドット下線*/
}

取り消し線

表示サンプル

下線を色々装飾してみます下線を色々装飾してみます下線を色々装飾してみます

CSS記述例

.sample5{
    text-decoration: line-through; /*取り消し線*/
}

まとめ

text-decoration でも面白い装飾を文字列につけられるので、積極的に使っていきたいと思います。