hr.iconをCSSで描画するUserCSS
#2024/02/22 23:01:45 可変幅バージョンに変更
#2024/02/23 00:17:31 無意味なネストを削除
パフォーマンス上の問題がありそうだったので
#2024/02/23 11:20:47 固定幅に戻してみる
#2024/02/23 11:43:07 なんか大丈夫そうなので可変幅に戻す
/icons/hrの方が人気っぽい
固定幅バージョン
style.disable.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;
}可変幅バージョン（多分重い）
style.css.line .text>span:has(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"] /* */
)) {
display: flex;
flex-wrap: wrap;
}
.line .text>span span:has(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"] /* */
)) { flex-grow: 1 }
.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"] /* */
) {
width: 100%;
img, span { display: none; } /* spanはiconが読み込まれるまでの間に表示される */
&::before {
display: inline-block;
width: 100%;
vertical-align: middle;
content: "";
border-top: 1px solid #afafaf;
}
&:is([href$="/icons/hrd"])::before {
border-style: dashed none none;
}
}↓これ
最近使えるようになったネスト記法だ！