外部リンクをファビコンに置き換える記法
[. https://~~~]
参考
デフォルト
対応サイト
code:Template.css
/* テンプレ */
}
code:style.css
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
ベース
URLの最初の3文字だけ表示
文字を透明にして、上からアイコンを被せる
code:style.css
.line:not(.cursor-line) .deco-\. a.link span:not(:first-of-type,:nth-of-type(2),:nth-of-type(3)){
display:none;
}
.line:not(.cursor-line) .deco-\. a.link{
position: relative;
display: inline-block;
text-decoration: none;
color: transparent;
height:22px;
width:22px;
border-radius: 3px;
margin-left: 2px;
margin-right: 2px;
transform: translateY(3px);
}
.line:not(.cursor-line) .deco-\. a.link::before{
content: "";
display: inline-block;
position:absolute;
width: 15px;
height: 15px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-size: contain;
pointer-events: none;
}
/* ホバーアニメーション */
.line:not(.cursor-line) .deco-\. a.link::after{
content: "";
position: absolute;
top: 0;
left: 0;
display: inline-block;
outline-offset: -1px;
border-radius: 3px;
height: 100%;
width: 100%;
z-index: -1;
transition: all 100ms cubic-bezier(0.2, 0.91, 0.85, 0.96) 0s;
}
.line:not(.cursor-line) .deco-\. a.link:hover::after{
}
a.linkに直接アウトラインをかけると、リンクを押している間、アウトラインを強制的に0にされてしまう
ので疑似要素でアウトラインをかける
ホバーで注釈をつける
code:style.css
.line:not(.cursor-line) .deco-\.{position: relative;}
.line:not(.cursor-line) .deco-\.:has(.link)::after{
content: "新しいタブで開く";
position: absolute;
display: block;
width: 90px;
top: -40px;
left: 50%;
transform: translateX(-50%);
padding: 0 3px;
font-size: 5px;
font-weight: bold;
letter-spacing: -0.1em;
text-align: center;
pointer-events: none;
opacity: 0;
border-radius: 4px;
transition: all 300ms cubic-bezier(0.2, 0.91, 0.85, 0.96) 0.1s;
}
.line:not(.cursor-line) .deco-\.:has(.link):hover::after{
opacity: 1;
transition-delay: 0.5s;
}
.line:not(.cursor-line) .deco-\.:has(.link)::before{
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
top: -12px;
left: 50%;
transform: translateX(-50%);
border-right: 6px solid transparent;
border-left: 6px solid transparent;
opacity: 0;
transition: all 300ms cubic-bezier(0.2, 0.91, 0.85, 0.96) 0.1s;
}
.line:not(.cursor-line) .deco-\.:has(.link):hover::before{
opacity: 1;
transition-delay: 0.5s;
}
埋まっちゃってるyuyasurarin.icon
めちゃめちゃ作りかけですねnomadoor.icon
なんとかしてなんとかします！
done
GJ!!!yuyasurarin.icon