cssを使ったくの字型の大きさを変える方法

初めに

くの字型の矢印をcssを使って書くことができる人は多いはず（多分😰)
ただ、その大きさを変えることができる人は何人いるだろうか。

今回、crowdworksの案件を受注した際に、

ボタン名 >　

みたいなボタンを作らなければいけなかったのに、
ボタン名はfont-sizeで大きくできるけど、その右にあるくの字型を
大きくする方法がわからずに試行錯誤したが、
なんとかできたので、備忘録としてこの記事を書く

くの字型の書き方（復習）

まずは、復習としてくの字型の書き方をおさらいしておく

<p class="arrow"></p>
<p>arrow</p>

.arrow{
    position: relative;
    display: inline-block;
    padding-left: 20px;
  }

  .arrow::before{
    content: '';
    width: 6px;
    height: 6px;
    border: 0px;
    border-top: solid 2px #5bc0de;
    border-right: solid 2px #5bc0de;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -4px;
  }

これで、htmlファイルを開いてみると、

こうなる。

大きさを変える

じゃあ、次に大きさを変えてみよう。
大きさを変えるには.arrow::before
のwidthとheightを任意の大きさに変えれば、くの字の大きさを変えることができます。

<p class="arrow"></p>
<p>arrow</p>

.arrow{
    position: relative;
    display: inline-block;
    padding-left: 20px;
  }

  .arrow::before{
    content: '';
    width: 60px;
    height: 60px;
    border: 0px;
    border-top: solid 2px #5bc0de;
    border-right: solid 2px #5bc0de;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -4px;
  }

widthとheightをそれぞれ10倍にしました。
これでhtmlファイルを開いてみると。。。。

こうなりました。

大きさは変わったけど。。。

見てもらえばわかると思うが、大きさは変わったが、文字列arrowにくの字がめり込んでいる。

これを解消せねば、真の意味での大きさを変えるとはいかない

<p class="arrow"></p>
<p class="text">arrow</p>

.arrow{
    position: relative;
    display: inline-block;
    padding-left: 20px;
  }

  .arrow::before{
    content: '';
    width: 60px;
    height: 60px;
    border: 0px;
    border-top: solid 2px #5bc0de;
    border-right: solid 2px #5bc0de;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -4px;
  }
  .text{
      padding-top:40px;
  }

これでhtmlファイルを開いてみるとこうなる。（ドキドキ、ドキドキ）

移動させたいテキストにクラスを付与して、padding-topを追加すれば良いとな

これで、皆さんのcssライフがより良くなると信じて筆を置きます。