破線で下線なリンクデザイン
https://gyazo.com/b9f4bd2dbb7a65babba2771745b38ea6
リンクに色がついていると、読むときに若干引っかかる気がする
破線にしてみる
code:style.css
.line a.empty-page-link,.line a.page-link,.line a.link{
color: black;
position:relative;
height:1px;
}
.line a.link{text-decoration:none;}
data-hover-visible .line a.page-link.empty-page-link:hover{color: black;}
data-hover-visible .line a.page-link:hover{color: black;}
data-hover-visible .line a.link:hover{color: black;}
.line a.page-link.empty-page-link::before{
content:"";
position:absolute;
width:calc(100% - 5px);
background-image :linear-gradient(to right,#888, #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,#000, #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,.line a.link::before{
content:"";
position:absolute;
width:calc(100% - 5px);
background-image : linear-gradient(to right, #888, #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,data-hover-visible .line a.link:hover::before{
content:"";
position:absolute;
width:calc(100% - 5px);
background-image : linear-gradient(to right, #000, #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:#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, #888, #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, #000, #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:#888;
}