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

generated at 11/17/2024, 9:37:43 AM
リンクを出典アイコンにするUserCSS
リンク記法のaliasを文字装飾記法で作ってみる

2022-02-13
13:52:47 /villagepump/リンクを出典アイコンにするUserCSSの変更を反映
外部リンクを区別するUserCSSも変更した
特定のリンクにアイコンをつけるUserCSSを追加した
2021-10-05
16:31:02 /villagepump/リンクを出典アイコンにするUserCSSの変更を反映
2021-10-04
17:23:21 /villagepump/リンクを出典アイコンにするUserCSSの変更を反映
2021-10-01
23:52:46 成功した！
行IDは隠さずにそのまま出したい
この辺は今度試す
今はsmartphoneから試しているので、dev toolで行IDのcss selectorを調べられない
2021-10-02
11:09:15 一般兄弟結合子でなんとかできそう
11:36:07 できた！
E:first-of-typeが何故か使えないので、 span.empty-char-index をそのまま使った
本当はE:first-of-typeで限定させたかったところなのだが

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";
}

例
とても長い名前の書籍 p.43によると～
たとえば、AAという調査結果がでているとても長い名前のサーベイ論文。～
参考文献に飛ぶ→test alias#615720d91280f00000032d62

テストコード
cf. /scrasobox/チェックボックスになるタグ 2
jsconst 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
アイコンで書籍出典表示

#2022-02-13 13:53:55 
#2021-10-05 16:33:27 
#2021-10-04 17:23:35 
#2021-10-01 23:20:58