Text Decoration | WEBデザイン Librarys

DEMO

いろはにほへとちりぬるを

使い方

{text-decoration-line}は複数併用可能。
{text-decoration-line: underline solid #000}とショートコードも可能。
{text-underline-offset}は{text-decoration}でも利用可能。

CSS

.deco.ul {text-decoration-line: underline;}
.deco.ol {text-decoration-line: overline;}
.deco.lt {text-decoration-line: line-through;}

.deco.double {text-decoration-style: double;}
.deco.dotted {text-decoration-style: dotted;}
.deco.dashed {text-decoration-style: dashed;}
.deco.wavy {text-decoration-style: wavy;}

.deco.thi2 {text-decoration-thickness: 2px;}
.deco.thi4 {text-decoration-thickness: 4px;}
.deco.thi6 {text-decoration-thickness: 6px;}

.deco.off2 {text-underline-offset: 2px;}
.deco.off4 {text-underline-offset: 4px;}
.deco.off6 {text-underline-offset: 6px;}