疑似要素で右向き三角矢印の高さを変更できない

前提・実現したいこと

疑似要素を使って右向き三角矢印を表示したい。

発生している問題・エラーメッセージ

右側が見切れた形となり、台形になります。

上向き、下向き矢印なら三角矢印になります。
高さを変更できれば解決できそうですが方法がわからず困っております。
ご指摘いただければ幸いです。

該当のソースコード

HTML
<a href="" class="more-btn">すべて見る</a>

CSS
.more-btn {
position: absolute;
right: 80px;
bottom: 44px;
display: inline-block;

    &::after {
      content: "";
      width: 0;
      height: 0; 
      border-style: solid;
      border-color: transparent transparent transparent $main-color;
      border-width: 10px; 
      transform: rotate(-90deg);
      
    }

行動規範の内容に同意します

回答1件

ベストアンサー

::after は初期値はインラインになりますので display: block; でブロックレベルにしないと、サイズを指定できません。また、位置も position: absolute; で絶対位置指定する必要があります。

css
1.more-btn {
2  position: absolute;
3  right: 80px;
4  bottom: 44px;
5  display: inline-block;
6
7  &::after {
8    content: "";
9    display: block;
10    width: 0;
11    height: 0;
12    position: absolute;
13    top: 0;
14    right: -25px;
15    border-style: solid;
16    border-color: transparent transparent transparent pink;
17    border-width: 10px; 
18  }
19}