【メモ】hoverで矢印が伸びるcss – ワプレ のコラムテキストリンクに少し装飾をしたいと思い、hoverした時に矢印が伸びるcssをメモしておきました。 具体的な事例は下記になります テキストリンクはこちら ソースは下記になります htmlは下記とします <p class=”arrow-button”><a href=””>テキストリンクはこちら</a></p> cssは下記になります <style> .arrow-button a { display:inline-block; cursor:pointer; position: relative; text-decoration: none; } .arrow-button a::after { content: “”; display: block; position: absolute; top: calc(50% – 5px); left: 90%; width: 40px; hei
