開発においてよく使うuiパーツを残しておこうと思います。
自分はこんな感じで表現していますという程度なので、もしもっと簡単にできるよとか
こんなデザインあるよとかあれば教えてください。
リンクテキスト
よくあるリンクテキストの例を紹介します。
1.矢印付きリンク
<aclass="c-link"href="#">テキストリンクです。</a>.c-link{display:flex;align-items:center;}.c-link:before{display:inline-block;content:"";border-top:4pxsolidtransparent;border-right:4pxsolidtransparent;border-bottom:4pxsolidtransparent;border-left:4pxsolid#ff0000;}.c-link:link,.c-link:visited{color:#ff0000;text-decoration:none;}.c-link:hover{text-decoration:underline;}2.矢印付きリンク その2
<aclass="c-link"href="#">テキストリンクです。</a>.c-link{position:relative;padding-right:10px;}.c-link:before,.c-link:after{position:absolute;right:0;display:inline-block;content:"";width:8px;height:8px;border-bottom:1pxsolid#ff0000;}.c-link:before{top:calc(50%-10px);transform:rotate(45deg);}.c-link:after{top:calc(50%--1px);transform:rotate(135deg);}.c-link:link,.c-link:visited{color:#ff0000;text-decoration:none;}.c-link:hover{text-decoration:underline;}3.矢印付きリンク その3(hoverで矢印の向きをかえる)
通常
hover時
<aclass="c-link"href="#">テキストリンクです。</a>.c-link{position:relative;padding-right:10px;}.c-link:before,.c-link:after{position:absolute;display:inline-block;content:"";width:8px;height:8px;border-bottom:1pxsolid#ff0000;transition:all0.3sease-out;}.c-link:before{top:calc(50%-4px);right:0;transform:rotate(-135deg);}.c-link:after{top:calc(50%-4px);right:0;transform:rotate(-45deg);}.c-link:link,.c-link:visited{color:#ff0000;text-decoration:none;}.c-link:hover{text-decoration:underline;}.c-link:hover:before{top:calc(50%-7px);transform:rotate(-45deg);}.c-link:hover:after{top:calc(50%-7px);transform:rotate(45deg);}4.フワッと背景テキストリンク
通常時
hover時
<aclass="c-link"href="#">テキストリンクです。</a>.c-link{color:#ff0000;transition:all0.3sease-out;}.c-link:link,.c-link:visited{color:#ff0000;text-decoration:none;}.c-link:hover{color:#fff;background:#ff0000;}まとめ
テキストリンクは色々デザインがあるので他にもいい実装方法とかデザインがあれば教えてください。