hr.iconをCSSで描画するUserCSS
/icons/hrを使うときの諸問題を解決するUserCSS
code:style.css
.line:not(.cursor-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 /* spanはiconが読み込まれるまでの間に表示される */ {
display: none;
}
&::before {
display: inline-block;
width: 100%;
vertical-align: middle;
content: "";
border-top: 1px solid #afafaf;
}
}
.line:not(.cursor-line) a.link.icon:is(href$="/icons/hrd")::before {
border-style: dashed none none;
}
/icons/hr.icon
/icons/hrd.icon
メリット
アイコンのロードを待たず高速に描画される
正しく上下中央に表示される
適用前: https://gyazo.com/144f6797cb56579732c574b8f8433c49
適用後: https://gyazo.com/28b111f66c24648df3b05a06f943806d
ページの横幅制限を解除するUserCSSしている場合にも横幅いっぱいに表示される
アイコンを用いる場合は行の高さに合わせて横幅が制限されるため、ページ幅いっぱいに広がらない
画面幅が狭くても細くならない
常に同じ太さで表示される
特にモバイル環境での視認性を改善
適用前: https://gyazo.com/460e1423b56b6f3a6593a691650454e3
適用後: https://gyazo.com/d91269502c0a5689c0ca5a11aea754c7
キャレット（カーソル位置に表示される縦線）が滑らなくなる（macOS環境）
適用前: https://gyazo.com/de063bc15870602dfde6c85cfe151060
線の後でキャレットが１行分ずれているのが確認できる
適用後: https://gyazo.com/5ec1a8ef8261a21a0664877c23ef381a
色を自由に変更できる
デフォルトは/icons/hrと同一
#2025-01-08 22:50:44 .cursor-lineで表示されてしまっていたので:not(.cursor-line)とした