リンクを出典アイコンにするUserCSS
2022-02-13
2021-10-05
2021-10-04
2021-10-01
23:52:46 成功した！
行IDは隠さずにそのまま出したい
この辺は今度試す
今はsmartphoneから試しているので、dev toolで行IDのcss selectorを調べられない
2021-10-02
11:36:07 できた！
code:style.css
.line .deco-\. {
font-size: .8em;
position: relative;
top: -0.5em;
}
.line:not(.cursor-line) .deco-\. a:is(.page-link:not(.icon), .link) span:not(.empty-char-index) + span + span ~ span {
display: inline-block;
width: 0;
text-indent: -9999px;
}
.line:not(.cursor-line) .deco-\. .page-link:not(.icon) span.empty-char-index ~ span.char-index {
display: inherit;
width: inherit;
text-indent: inherit;
}
.line:not(.cursor-line) .deco-\. a.page-link:not(.icon) span.empty-char-index + span::before {
content: "#";
}
.line .deco-\. :is(.page-link:not(.icon), .link)::before {
display: inline-block;
min-width: 1.15em;
padding-left: 1px;
/* padding: 0 1px; */
font-family: "Font Awesome 5 Free","Font Awesome 5 Brands";
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";
}
例
https://gyazo.com/b1a853ff9473aeab0bbcb06809ae5056
テストコード
code:js
const css = String.raw`
.line:not(.cursor-line) .deco-\# .page-link:not(.icon) span {
display: inline-block;
width: 0;
text-indent: -9999px;
}
.line:not(.cursor-line) .deco-\# .page-link:not(.icon) span.empty-char-index ~ span {
display: inherit;
width: inherit;
text-indent: inherit;
}
.line:not(.cursor-line) .deco-\# .page-link:not(.icon)::before {
display: inline-block;
min-width: 1.15em;
padding-left: 1px;
font-family: 'Font Awesome 5 Free';
font-size: 120%;
text-align: center;
vertical-align: middle;
font-weight: 900;
content: "\f02d";
}
.line:not(.cursor-line) .deco-\#.deco-\* .page-link:not(.icon)::before {
font-weight: 400;
content: "\f1c1";
}
`;
const id = "css-test-alias";
document.getElementById(id)?.remove?.();
const style = document.createElement("style");
style.textContent = css;
style.id = id;
document.head.append(style);
Related to