リンクを出典アイコンにするUserCSS
出典がある行にカーソルを合わせると文字が上下にずれる
リンクがある行がもともとそうなっているだけ？
上付き文字にしなければずれなさそう
()の色をリンクの色に合わせるには？
.line .deco-\. :is(.page-link:not(.icon), .link) のほうに()も書く？
全体設定
style.css.line:not(.cursor-line) .deco-\. {
font-size: .8em;
/* vertical-align: super; */ /* 上付き文字にする */
}
() で囲む
style.css.line:not(.cursor-line) .deco-\.::before {
content: "(";
}
.line:not(.cursor-line) .deco-\.::after {
content: ")";
}
[. ] 内のリンクを消す
style.css.line:not(.cursor-line) .deco-\. :is(.page-link:not(.icon), .link) span {
display: inline-block;
width: 0;
text-indent: -9999px;
}
行リンクのIDは表示されるよう、↑の効果を打ち消しておく
style.css.line:not(.cursor-line) .deco-\. .page-link:not(.icon) span.empty-char-index ~ span {
display: inherit;
width: inherit;
text-indent: inherit;
}
アイコンを設定する
style.css.line .deco-\. :is(.page-link:not(.icon), .link)::before {
display: inline-block;
min-width: 1.15em;
padding: 0 1px;
font-family: 'Font Awesome 5 Free';
text-align: center;
vertical-align: middle;
font-weight: 900;
content: "\f02d";
}
/* 斜体を取り消す */
.line .deco-\..deco-\/ {
font-style: initial;
}
.line .deco-\..deco-\/ :is(.page-link:not(.icon), .link)::before {
font-weight: 400;
content: "\f15c";
}