UserCSS:リンクを地味にする
from UserCSS:リンク
UserCSS:リンクを地味にする
road2noma - /road2noma/破線で下線なリンクデザイン
code:style.css
.line a.empty-page-link,.line a.page-link{
color: var(--page-text-color, black);
position:relative;
height:1px;
}
data-hover-visible .line a.page-link.empty-page-link:hover{color: var(--page-text-color, black);}
data-hover-visible .line a.page-link:hover{color: var(--page-text-color, black);}
.line a.page-link.empty-page-link::before{
content:"";
position:absolute;
width:calc(100% - 5px);
background-image :linear-gradient(to right,var(--page-text-color, #888), var(--page-text-color, #888) 1px, transparent 1px, transparent 4px);
background-size: 4px 1px;
background-position: left bottom;
background-repeat: repeat-x;
top:0;
left:50%;
right:0;
bottom:-1px;
transform: translateX(-50%);
transition: all 0.4s 0s cubic-bezier(.165,.84,.44,1);
pointer-events: none; /* これがないと一発でクリック出来ない */
}
data-hover-visible .line a.page-link.empty-page-link:hover::before{
content:"";
position:absolute;
width:calc(100% - 5px);
background-image : linear-gradient(to right,var(--page-text-color, #000), var(--page-text-color, #000) 2px, transparent 2px, transparent 5px);
background-size: 5px 1px;
background-position: left bottom;
background-repeat: repeat-x;
top:0;
left:50%;
right:0;
bottom:-1px;
transform: translateX(-50%);
}
.line a.page-link::before{
content:"";
position:absolute;
width:calc(100% - 5px);
background-image : linear-gradient(to right, var(--page-text-color, #888), var(--page-text-color, #888) 4px, transparent 4px, transparent 6px);
background-size: 6px 1px;
background-position: left bottom;
background-repeat: repeat-x;
top:0;
left:50%;
right:0;
bottom:-1px;
transform: translateX(-50%);
transition: all 0.4s 0s cubic-bezier(.165,.84,.44,1);
pointer-events: none;
}
data-hover-visible .line a.page-link:hover::before{
content:"";
position:absolute;
width:calc(100% - 5px);
background-image : linear-gradient(to right, var(--page-text-color, #000), var(--page-text-color, #000) 5px, transparent 5px, transparent 9px);
background-size: 9px 1px;
background-position: left bottom;
background-repeat: repeat-x;
top:0;
left:50%;
right:0;
bottom:-1px;
transform: translateX(-50%);
}
外部リンク 参考 : /villagepump/外部リンクを区別するUserCSS
code:style.css
.line span:not(.modal-image):not(.pointing-device-map) > a.link:not(.icon):not([href^="https://scrapbox.io"]){
color:var(--page-text-color, #000);
text-decoration:none;
position:relative;
}
.line span:not(.modal-image):not(.pointing-device-map) > a.link:not(.icon):not([href^="https://scrapbox.io"])::before{
content:"";
position:absolute;
width:calc(100% - 5px);
background-image : linear-gradient(to right, var(--page-text-color, #888), var(--page-text-color, #888) 4px, transparent 4px, transparent 6px);
background-size: 6px 1px;
background-position: left bottom;
background-repeat: repeat-x;
top:0;
left:50%;
right:0;
bottom:-1px;
transform: translateX(-50%);
transition: all 0.4s 0s cubic-bezier(.165,.84,.44,1);
pointer-events: none; /* これがないと一発でクリック出来ない */
}
.line span:not(.modal-image):not(.pointing-device-map) > a.link:not(.icon):not([href^="https://scrapbox.io"]):hover::before{
content:"";
position:absolute;
width:calc(100% - 5px);
background-image : linear-gradient(to right, var(--page-text-color, #000), var(--page-text-color, #000) 5px, transparent 5px, transparent 9px);
background-size: 9px 1px;
background-position: left bottom;
background-repeat: repeat-x;
top:0;
left:50%;
right:0;
bottom:-1px;
transform: translateX(-50%);
}
.line span:not(.modal-image):not(.pointing-device-map) > a.link:not(.icon):not([href^="https://scrapbox.io"])::after {
font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands';
font-weight: 900;
font-size: 0.8rem;
content: ' \f35d';
display: inline-block;
color:var(--page-text-color, #888);
}
UserCSS.icon
https://img.shields.io/badge/UserCSS-リンクを地味にする-1572B6.svg?logo=css3&style=for-the-badge