マーカーライン

text-decorationプロパティでマーカー

ブロック要素の中でもテキスト部分にのみ線が引かれる。

.c-marker.-deco { text-decoration: underline; text-decoration-color: var(--themecolor); text-underline-offset: -.3em; text-decoration-thickness: .6em; }

コンポーネントはここまでで、それ以外の調整は専用CSSファイルにて行う。

マーカーの位置はtext-underline-offsetプロパティで調整。

マーカーの太さはtext-decoration-thicknessプロパティで調整。下方向へ太くなる。

.-position .c-marker.-deco { text-underline-offset: -1.3em; } .-width .c-marker.-deco { text-underline-offset: -1.3em; text-decoration-thickness: 2em; }

マーカーの位置はtext-decoration-lineプロパティでも調整できるが、underline以外は数値による位置調整ができない。打ち消し線（line-through）はテキストの上に被る。

マーカーの位置はtext-decoration-lineプロパティでも指定できる。これは上線。太さは上へと太くなる。

マーカーの位置はtext-decoration-lineプロパティでも指定できる。これは打ち消し線。太さは中央を中心に太くなる。

.-overline .c-marker.-deco { text-decoration-line: overline; } .-through .c-marker.-deco { text-decoration-color: #86c0decc; text-decoration-line: line-through; }

マーカーのスタイルはtext-decoration-lineプロパティで変更できる。
英字部分のみ途切れているのはtext-decoration-skip-inkプロパティの効果、noneにすれば途切れない。

マーカーのスタイルはtext-underline-styleプロパティで指定できる。これは二重線。

マーカーのスタイルはtext-underline-styleプロパティで指定できる。これは点線。

マーカーのスタイルはtext-underline-styleプロパティで指定できる。これは破線。

マーカーのスタイルはtext-underline-styleプロパティで指定できる。これは波線。

.-double .c-marker.-deco { text-decoration-style: double; } .-dotted .c-marker.-deco { text-decoration-style: dotted; } .-dashed .c-marker.-deco { text-decoration-style: dashed; text-decoration-skip-ink: none; } .-wavy .c-marker.-deco { text-decoration-style: wavy; text-decoration-skip-ink: none; }

アニメーション可能（2023年1月現在、Safari/Firefoxのみ）。ここではtext-underline-offsetプロパティとtext-decoration-thicknessプロパティで位置と太さを変化させている。

.-anim .c-marker.-deco { text-decoration-skip-ink: none; transition: text-underline-offset .4s, text-decoration-thickness .4s; } .-anim .c-marker.-deco:not(:hover) { text-underline-offset: -1.2em; text-decoration-thickness: .2em; }

border-imageプロパティでマーカー

要素に対して下線を引くので、複数行に適用する場合には、別途インライン要素にする必要がある。

.c-marker.-border { display: inline-block; border-image: linear-gradient(var(--themecolor), var(--themecolor)) 0 fill / 1em 0 .4em; }

コンポーネントはここまでで、それ以外の調整は専用CSSファイルにて行う。

マーカーの位置と太さはborder-image-widthプロパティで調整。

上辺の位置と底辺の位置で太さが決まる寸法。

マーカーラインを左右にはみ出させるにはborder-image-outsetプロパティを別途指定。

.-position .c-marker.-border { border-image-width: .5em 0 .5em; } .-width .c-marker.-border { border-image-width: .2em 0 .2em; } .-over .c-marker.-border { border-image-outset: 0 1em; }

アニメーション可能。ここではborder-image-widthプロパティの上下の位置を変化させている。

.-anim .c-marker.-border { transition: border-image-width .4s; } .-anim .c-marker.-border:not(:hover) { border-image-width: 2em 0 .2em; }

backgroundプロパティでマーカー

要素に対して背景色を敷くため、コンポーネントの時点でインライン要素にしている。

.c-marker.-bg { display: inline; background: linear-gradient(var(--themecolor), var(--themecolor)) left bottom / 100% .6em no-repeat; }

コンポーネントはここまでで、それ以外の調整は専用CSSファイルにて行う。

マーカーの位置はbackground-positionプロパティでbottomの後に数値を指定して調整。

マーカーの太さはbackground-sizeプロパティで調整。

マーカーラインを左右にはみ出させるにはpadding-inlineプロパティを別途指定。

.-position .c-marker.-bg { background-position: left bottom .3em; } .-width .c-marker.-bg { background-size: 100% 2em; } .-over .c-marker.-bg { padding-inline: 1em; }

アニメーション可能。ここではbackground-sizeプロパティの横幅を変化させている。

.-anim .c-marker.-bg { background-position: right bottom; background-size: 0 .5em; transition: background-size .4s; } .-anim .c-marker.-bg:hover { background-position: left bottom; background-size: 100% .5em; transition-duration: .2s; }

News