/
text-decoration といえば、リンクに下線を引く程度しか使っていないと思うのですが、実は、色、形状、テキストからの距離まで色々できちゃう優れもの。
マーカー風の装飾だって作れますよ^^
text-decoration でできる事 (プロパティと値 )
指定方法 (text-decoration の一括指定 / 距離・英字処理は別指定)
text-decoration: 1-line 2-style 3-color 4-thickness;
text-underline-offset: 〇em; /* 文字サイズを変える事があるので em がお勧め */
text-decoration-skip-ink: none; /* noneにするとディセンダー(下がった部分)でラインが切れない */
1 – 線の種類 text-decoration-line:
underline; | 下線・・・ |
overline; | 上線・・・ |
line-through; | 取り消し線 |
underline line-through; | 重ねがけもOK |
2 – 線のスタイル text-decoration-style:
solid; | 直線 ・・・・・・・ |
double; | 2重線・・・・・・・ |
dotted; | ドット線・・・・・・ |
dashed; | 破線・・・・・・・・ |
wavy; | 波線 ・・・・・・・・ |
3-線の色 text-decoration-color:
#000000, rgb(), 色名 | 普通の色指定と同じ |
4-線幅 text-decoration-thickness:
テキストからの距離(別指定) text-underline-offset:
text-decoration-line: underline;
text-underline-offset: 10px; | 10px離す・・・ | ちょっとゆったり |
text-decoration:underline aquamarine .5em;
text-underline-offset:-.3em; | .5emの線を.3em上げる・・ | マーカー風 |
英字処理(別指定) text-decoration-skip-ink:
text-decoration-line: underline red 2px;
text-decoration-skip-ink: auto;
| defghijkl | ディセンダーで切れますが、ドットやカンマなどでも切れる事があります |
text-decoration-line: underline red 2px;
text-decoration-skip-ink: none; | defghijkl | 切れずに線がつながります |
日本語の間に英数字が入ると線が切れる事があります(特に offset マイナスの場合)。
安全のためにも text-decoration-skip-ink: none; を入れておくのがお勧めです^^
