hr.iconをCSSで描画するUserCSS
style.css.line a.link.icon:is(
/* [href$="/icons/-"], /* */
/* [href$="/icons/---"], /* */
[href$="/icons/hr"], /* */
/* [href$="/icons/%E6%B0%B4%E5%B9%B3%E7%B7%9A"], /* [/icons/水平線.icon] */
[href$="/icons/hrd"] /* */
) {
img, span { display: none; } /* spanはiconが読み込まれるまでの間に表示される */
&::before {
display: inline-block;
width: 100%;
vertical-align: middle;
content: "";
border-top: 1px solid #afafaf;
}
}
.line a.link.icon:is([href$="/icons/hrd"])::before {
border-style: dashed none none;
}
メリット
アイコンのロードを待たず高速に描画される
正しく上下中央に表示される
適用前: 
適用後: 
ページの横幅制限を解除するUserCSSしている場合にも横幅いっぱいに表示される
アイコンを用いる場合は行の高さに合わせて横幅が制限されるため、ページ幅いっぱいに広がらない
画面幅が狭くても細くならない
常に同じ太さで表示される
特にモバイル環境での視認性を改善
適用前: 
適用後: 
キャレット（カーソル位置に表示される縦線）が滑らなくなる（macOS環境）
適用前: 
線の後でキャレットが１行分ずれているのが確認できる
適用後: 
色を自由に変更できる
デフォルトは/icons/hrと同一