[css]テキストに波線をつける複数解

決定打にならないのがね。

text-decoration
画像を使う
斜線といえば

text-decoration

span{
    text-decoration: underline wavy 2px #000;
}

underlineにwavyを足すとこんなかんじで波線が付けられる。text-decorationなので改行にも耐えられるから手っ取り早いけど、色と太さしかいじれないし、テキストとの間隔も調整できないという。かゆいところが残る。

画像を使う

ちょっと頑張るやつ。

ループできるやつ

こんな画像を使う。

span{
    padding-bottom: calc(0.25em + 5px);
    position: relative;
}
span::before{
    content: "";
    width: 100%;
    height: 0.25em;
    background: url(【波線画像】) repeat-x left center;
    background-size: auto 100%;
    display: block;
    position: absolute;
    left: 0;
    bottom: 5px;
}

こうやって組めば疑似要素の高さが波線のサイズになるし、文字との間隔も調整できるんで一応汎用性はある。改行には耐えられないから利用シーンが限られるけど。

これを応用したら斜線でアンダーラインを引くこともできる。

斜線といえば

cssで斜線を引くことはできるけど、手打ちでストライプ模様を作るとなると線の数だけ書かなきゃいけないから非常にだるいので論外。

repeating-linear-gradientだったらジェネレーターもあるし、簡単そうに見えるっちゃ見える。

CSS STRIPE GENERATOR

ストライプCSSジェネレーター

でも、大味なやつならいいんだけど1～2pxとか細いやつで装飾したい場合は向かない。やったらわかるけど一定数以下だと変な感じに表示される。ということで、画像で作ったほうが楽。