リンクを出典アイコンにするUserCSS: リンクの最初の3文字を表示するバージョン
リンクを出典アイコンにするUserCSSの、aタグの文字列の最初の3文字を残しておくバージョン
✅️リンクを出典アイコンにするUserCSSでリンクをクリックできない問題のworkaround
3文字の部分をクリックすればリンク先へ飛べる
style.css/* 上付きにする */
.deco-\. {
font-size: .6em;
position: relative;
top: -0.5em;
}
/* リンク文字列の3文字目以降を消す */
.line:not(.cursor-line) .deco-\. :is(.page-link:not(.icon), .link) span:not(.empty-char-index) + span + span ~ span {
display: none;
}
/* 行リンクの行idの部分は表示する */
.line:not(.cursor-line) .deco-\. .page-link:not(.icon) span.empty-char-index ~ span.char-index {
display: inherit;
}
/* 行idの直前に#をつける */
.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: 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";
}3文字回避の実装はScrapboxでは文字がspanで囲われている性質を使っているんだ