hr.iconをCSSで描画するUserCSS

パフォーマンス上の問題がありそうだったので

固定幅バージョン

code:style.disable.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;

}

可変幅バージョン（多分重い）

code:style.css

.line .text>span:has(a.link.icon:is(

)) {

display: flex;

flex-wrap: wrap;

}

.line .text>span span:has(a.link.icon:is(

)) { flex-grow: 1 }

.line a.link.icon:is(

) {

width: 100%;

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

settings.icon

UserCSS.icon