リンクを出典アイコンにするUserCSS

出典がある行にカーソルを合わせると文字が上下にずれる

リンクがある行がもともとそうなっているだけ？

上付き文字にしなければずれなさそう

()の色をリンクの色に合わせるには？

全体設定

code:style.css

.line:not(.cursor-line) .deco-\. {

font-size: .8em;

/* vertical-align: super; */ /* 上付き文字にする */

}

code:style.css

.line:not(.cursor-line) .deco-\.::before {

content: "(";

}

.line:not(.cursor-line) .deco-\.::after {

content: ")";

}

code:style.css

.line:not(.cursor-line) .deco-\. :is(.page-link:not(.icon), .link) span {

display: inline-block;

width: 0;

text-indent: -9999px;

}

行リンクのIDは表示されるよう、↑の効果を打ち消しておく

code:style.css

.line:not(.cursor-line) .deco-\. .page-link:not(.icon) span.empty-char-index ~ span {

display: inherit;

width: inherit;

text-indent: inherit;

}

アイコンを設定する

code: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";

}