【Tips】制作の現場でよく使う！シンプルなリンク

<a href="">TEXT LINK</a>


a {
  position: relative;
}
a::before,
a::after {
  content: "";
  position: absolute;
  top: 23px;
  left: 170px;
  height: 1px;
  background-color: #333;
}
a::before {
  width: 80px;
}
a::after {
  width: 14px;
  transform-origin: right center;
  transform: translate(65px, 0px) rotate(45deg);
}

<a href="">TEXT LINK</a>


a {
  padding-left: 70px;
  position: relative;
}
a::before,
a::after {
  content: "";
  position: absolute;
  top: 16px;
  left: 0;
  height: 1px;
  background-color: #333;
}
a::before {
  width: 50px;
}
a::after {
  width: 14px;
  transform-origin: right center;
  transform: translate(36px, 0px) rotate(25deg);
}

<a href="">BUTTON</a>


a {
  position: relative;
}
a::after {
  content: "";
  width: 14px;
  height: 14px;
  border-top: solid 2px #333;
  border-right: solid 2px #333;
  transform: rotate(45deg);
  position: absolute;
  margin-top: -7px;
  top: 50%;
  left: 160px;
}

<a href="">BUTTON</a>


a {
  border-bottom: solid 1px #333;
  padding: 0 0 6px 25px;
  position: relative;
}
a::before {
  content: "";
  width: 14px;
  height: 14px;
  border-top: solid 2px #333;
  border-right: solid 2px #333;
  transform: rotate(45deg);
  position: absolute;
  margin-top: -10px;
  top: 50%;
  left: -5px;
}

<a href="">BUTTON</a>


a {
  display: flex;
  align-items: center;
}
a .icon-arrow {
  width: 30px;
  margin-left: 26px;
}