UserCSS:下線記法
下線記法[_ ]の変更
アンダーラインが消せない、どうして？
（強制的に"text-decoration: underline"のプロパティが追加されているもよう）
テスト テストだよ
アンダーラインを強制的に消す（副作用注意）
code:stylexx.css
.line span.deco span{
/*color: #ee6666; /* 赤 */
text-decoration: none !important; /* */
/* border-bottom: none !important; /* */
/* text-decoration: none; /* */
/* border-bottom: none; /* */
}
アンダーラインをtext-decorationで表現
code:stylexx.css
.deco-\_ {
/* color: #ee6666; /* 赤 */
/* background-color: #ee6666; /* 赤 */
/* text-decoration: none !important; /* */
/* text-decoration: underline; /* アンダーライン */
/* text-decoration: underline wavy ; /* アンダーライン */
text-decoration: underline solid ; /* アンダーライン */
/* text-decoration: overline solid; /* オーバーライン */
/* text-decoration: line-through solid pink; /* 打ち消し線 */
text-decoration-color: pink; /* */
}
code:stylexx.css
.deco-\_ {
text-decoration: underline solid ; /* アンダーライン */
text-decoration-thickness: 2px; /* 線の太さ */
text-decoration-color: var(--text-color, black); /* */
&:has(span:nth-child(1) > adata-page-title="blue") {
text-decoration-color: lightblue;/* */
& > span:nth-child(1) > a { display: none; }
}
&:has(span:nth-child(1) > adata-page-title="red") {
text-decoration-color: red;/* */
& > span:nth-child(1) > a { display: none; }
}
&:has(span:nth-child(1) > adata-page-title="green") {
text-decoration-color: green;/* */
& > span:nth-child(1) > a { display: none; }
}
&:has(span:nth-child(1) > adata-page-title="yellow") {
text-decoration-color: yellow;/* */
text-decoration-thickness: 4px; /* 線の太さ */
& > span:nth-child(1) > a { display: none; }
}
&:has(span:nth-child(1) > adata-page-title="black") {
text-decoration-color: black;/* */
& > span:nth-child(1) > a { display: none; }
}
&:has(span:nth-child(1) > adata-page-title="重要\.icon") {
text-decoration-color: pink;/* */
}
}
テスト suto3.icon テスト
テストblue テスト
red テスト suto3.icon テストテスト
テストgreen テスト
yellow テスト テスト
black テスト テスト
重要.icon テスト テスト
アンダーラインをborder-bottomで表現
code:stylexx.css
.deco-\_ {
/* border-bottom: none; /* */
border-bottom: solid 3px pink;/* */
}
アンダーラインを背景のグラデーションで表現
code:stylexx.css
.deco-\_ {
background: linear-gradient(
transparent 65%,
rgba(255,255,40,0.7)
);
}
アンダーラインを背景のグラデーションで表現
code:stylexx.css
.deco-\_ {
background: linear-gradient(
transparent 65%,
var(--main-color)
);
}
code:stylexx.css
.deco-\_ {
/* border-bottom: none; /* */
border-bottom: solid 3px var(--text-color, black);/* */
&:has(span:nth-child(1) > adata-page-title="blue") {
border-bottom: solid 3px blue;/* */
& > span:nth-child(1) > a { display: none; }
}
&:has(span:nth-child(1) > adata-page-title="red") {
border-bottom: solid 3px red;/* */
& > span:nth-child(1) > a { display: none; }
}
&:has(span:nth-child(1) > adata-page-title="green") {
border-bottom: solid 3px green;/* */
& > span:nth-child(1) > a { display: none; }
}
&:has(span:nth-child(1) > adata-page-title="yellow") {
border-bottom: solid 4px yellow;/* */
& > span:nth-child(1) > a { display: none; }
}
}
重要 テスト
大切 テスト
面白い テスト
code:style.css
.deco-\_ {
text-decoration: underline solid ; /* アンダーライン */
text-decoration-thickness: 2px; /* 線の太さ */
text-decoration-color: var(--text-color, black); /* */
&:has(span:nth-child(1) > adata-page-title="重要") {
text-decoration-color: red;/* */
& > span:nth-child(1) > a { display: none; }
}
&:has(span:nth-child(1) > adata-page-title="大切") {
text-decoration-color: orange;/* */
& > span:nth-child(1) > a { display: none; }
}
&:has(span:nth-child(1) > adata-page-title="面白い") {
text-decoration-color: lime;/* */
& > span:nth-child(1) > a { display: none; }
}
}
Scrapbox:下線記法
UserCSS:文字装飾
UserCSS.icon
https://img.shields.io/badge/UserCSS-下線記法-1572B6.svg?logo=css3&style=for-the-badge