リンクボタンにCSSだけで矢印を追加する

擬似クラスを利用し、CSSだけでリンクボタンに矢印を追加します。

HTML(Pug)

.button
  a link

CSS(SCSS)

.button {
  a {
    background-color: gray;
    box-sizing: border-box;
    color: #fff;
    display: block;
    font-size: 14px;
    padding: 15px 10px;
    text-align: center;
    position: relative;
    max-width: 150px;
    &::before {
      content: '';
      border: solid 1px #fff;
      border-width: 1px 1px 0 0;
      width: 4px;
      height: 4px;
      transform: translate(0, -50%) rotate(45deg);
      position: absolute;
      top: 50%;
      right: 10px;
    }
  }
}