hr.iconをCSSで描画するUserCSS

code:style.css

.line a.link.icon:is(

) {

img, span { display: none; } /* spanはiconが読み込まれるまでの間に表示される */

&::before {

display: inline-block;

width: 100%;

vertical-align: middle;

content: "";

}

}

border-style: dashed none none;

}

/icons/hr.icon

/icons/hrd.icon

メリット

アイコンのロードを待たず高速に描画される

正しく上下中央に表示される

アイコンを用いる場合は行の高さに合わせて横幅が制限されるため、ページ幅いっぱいに広がらない

画面幅が狭くても細くならない

常に同じ太さで表示される

特にモバイル環境での視認性を改善

キャレット（カーソル位置に表示される縦線）が滑らなくなる（macOS環境）

線の後でキャレットが１行分ずれているのが確認できる

色を自由に変更できる