SHIROI PONZU

丸の中に三角矢印

HTML

<a class="more">MORE</a>

CSS

.more { align-items: center; display: inline-flex; position: relative; padding-right: 30px; } .more::before,.more::after{ content:""; display: block; position: absolute; } .more::before { -webkit-border-radius: 50%; border-radius: 50%; background: #ccc; height: 24px; right: 0; width: 24px; } .more::after { border: 8px solid transparent; border-left: 12px solid #000; right: -4px; }