現役エンジニア・デザイナーの備忘録ブログ

丸の中に三角矢印

<a class="more">MORE</a>
.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;
}