<a class="btn" href="#">
gridボタン内に疑似要素でテキストのアイコン
</a>
.btn {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 10px;
align-items: center;
max-width: 400px;
margin-inline: auto;
padding: 10px;
border-radius: 10px;
background: #EFEFEF;
text-decoration: none;
}
.btn::before {
content: '';
}
.btn::after {
justify-self: end;
content: '>';
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.