チェックボックスになるタグ
[_] これが _ こうなるよ。
[x] これは x こうなるよ。
チェックボックスをクリックしてもチェックマークはつかないので注意。
madobe.icon 2017-09-16 シンプルな Font Awesome 版もできました!→ チェックボックスになるタグ 2
表示サンプル(画像)
https://gyazo.com/ef3d2508d829891429a946afcdea29d1
これに限らずだけど、スタイルシートの整形が全然できてないのはご愛嬌だよ。
code:style.css
.line ahref$="/_",
.line ahref$="/x" {
visibility: hidden; display: inline-block; position: relative; min-width: 1.15em; line-height: 1 }
.line ahref$="/_"::after,
.line ahref$="/x"::after {
visibility: visible; position: absolute; left: 0;
content: '\0025A2'; font-weight: bold; color: #08BDBD !important }
.line ahref$="/x" + span { position: relative; vertical-align: text-top; line-height: 1 }
.line ahref$="/x" + span::after {
content: ''; visibility: visible; display: inline-block; width: .6em; height: .9em;
position: absolute; left: -0.8em; top: -0.2em;
border-right: .18em solid #2489C5; border-bottom: .18em solid #2489C5; transform: rotate(45deg) }
.line.cursor-line ahref$="/_",
.line.cursor-line ahref$="/x" { visibility: visible }
.line.cursor-line ahref$="/_"::after,
.line.cursor-line ahref$="/x"::after { visibility: hidden }
.line.cursor-line ahref$="/x" + span { position: inherit }
.line.cursor-line ahref$="/x" + span::after {
content: ''; visibility: inherit; display: inherit; position: inherit;
border: inherit; transform: inherit }
インポート構文
code:import.css
@import "https://scrapbox.io/api/code/scrasobox/チェックボックスになるタグ/style.css";
#タグとあそぶ #UserCSS #タグスタイル展覧会
初出 2017-09-06
2017-09-09 Edge向けに微調整
2017-09-11 行間が変だったので直し
2017-09-15 プレゼンモードのとき見栄えが悪かったので調整
2017-09-16 太字記法に囲まれたときブロック幅が足りてなかったのを修正
2018-03-27 タグリンクのhref値が変わったぽいので対応
2018-04-01 タグリンクのhref値が変わったぽいので対応
2022-03-19 タグリンクのhref値が変わったぽいので対応