UserCSS:打ち消し記法
打ち消し記法[- ]の変更
テスト テストだよ テストですの
打ち消し線は<strike> で引くので、タグでの修飾を変更する
code:style.css
strike {
text-decoration-line: none;
}
code:stylexx.css
strike {
text-decoration: underline solid red; /* アンダーライン */
}
code:stylexx.css
strike {
text-decoration: line-through solid red; /* 赤色打ち消し線 */
/* text-decoration: line-through double red; /* 赤色打ち消し線 */
}
打ち消し線をborderで表現（ちと苦しい）
code:stylexx.css
strike {
/* border-bottom: none; /* */
border-top: solid 2px pink;/* */
border-bottom: solid 2px pink;/* */
}
打ち消し線を背景のグラデーションで表現
code:stylexx.css
strike {
background: linear-gradient( to bottom,
transparent 30%,
/* red ,*/
pink ,
transparent 70%
);
text-decoration: none; /* */
border: none;
}
code:style.css
strike {
background: linear-gradient( to bottom,
transparent 30%,
var(--main-color) ,
transparent 70%
);
text-decoration: none; /* */
border: none;
}
.deco-\- では、text-decoration: を書き換えることはできないようだ。
（ああ、そういうことか）
code:stylexx.css
.deco-\- {
/* text-decoration: none; /* */
/* text-decoration: line-through solid green; /* 赤色打ち消し線 */
/* text-decoration: line-through double red; /* 赤色打ち消し線 */
text-decoration: underline solid red; /* アンダーライン */
}
文字色と背景色を同じ色にして見えなくする。
マウスオーバーで見える。
code:stylexx.css
.deco-\- {
color: black; /* */
background-color: black; /* */
}
.deco-\-:hover {
color: inherit ; /* */
background-color: inherit ; /* */
}
code:stylexx.css
.line span.deco strike {
color: black; /* 表示色 */
background-color: black; /* 背景色（表示色に合わせる） */
text-decoration: none; /* 取り消し線をキャンセル */
}
.line span.deco strike:hover {
color: inherit; /* 表示色を元に戻す */
background-color: inherit; /* 背景色を元に戻す */
text-decoration: underline solid red; /* アンダーライン（お好みで） */
}
取り消しのとき文字を少し透明に
code:style.css
.deco-\- {
opacity: 0.7;
}
透明に
code:stylexx.css
.deco-\-:not(:hover) {
opacity: 0;
}
.deco-\-:hover {
opacity: 1;
}
code:stylexx.css
.line:not(.cursor-line) a.page-link:not(:hover) {
color: black;
background-color: black;
}
UserCSS.icon
https://img.shields.io/badge/UserCSS-打ち消し記法-1572B6.svg?logo=css3&style=for-the-badge