hrをCSSで描画するUserCSS

/villagepump/hr.iconをCSSで描画するUserCSS

style.css

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

[href$="/icons/hr"], /* */

[href$="/icons/hrd"] /* */

)) {

display: flex;

flex-wrap: wrap;

}

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

[href$="/icons/hr"], /* */

[href$="/icons/hrd"] /* */

)) { flex-grow: 1 }

.line a.link.icon:is(

[href$="/icons/hr"], /* */

[href$="/icons/hrd"] /* */

) {

width: 100%;

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

&::before {

display: inline-block;

width: 100%;

vertical-align: middle;

content: "";

border-top: 1px solid var(--ui-3); /* 色をFlexokiに合わせる */

}

&:is([href$="/icons/hrd"])::before {

border-style: dashed none none;

}

}

#UserCSS