text-decoration-styleプロパティは、
text-decoration-lineプロパティでテキストにつけた傍線のスタイルを指定する際に使用します。
text-decoration-styleプロパティで要素に線スタイルを指定した場合、その子孫ボックスに異なるスタイルが指定されていたとしても、テキストにつけられる傍線のスタイルは同じとなります。
p.sample { text-decoration-line: underline; } p.sample span{ text-decoration-line: overline; text-decoration-style: wavy; }
<h5>text-decoration-style: solid; を下線に指定</h5> <p class="sample" style="text-decoration-style: solid;"> ららららら<span>りりりりり</span>るるるるる </p> <h5>text-decoration-style: double; を下線に指定</h5> <p class="sample" style="text-decoration-style: double;"> ららららら<span>りりりりり</span>るるるるる </p> <h5>text-decoration-style: dotted; を下線に指定</h5> <p class="sample" style="text-decoration-style: dotted;"> ららららら<span>りりりりり</span>るるるるる </p> <h5>text-decoration-style: dashed; を下線に指定</h5> <p class="sample" style="text-decoration-style: dashed;"> ららららら<span>りりりりり</span>るるるるる </p> <h5>text-decoration-style: wavy; を下線に指定</h5> <p class="sample" style="text-decoration-style: wavy;"> ららららら<span>りりりりり</span>るるるるる </p>
らららららりりりりりるるるるる
らららららりりりりりるるるるる
らららららりりりりりるるるるる
らららららりりりりりるるるるる
らららららりりりりりるるるるる