アイコン付きテキスト

<span class="before-icon"><a href="#">戻る</a></span>

.before-icon::before {
	display: inline-block;
	margin-right: 0.3em;
	content: "";
	width: 0.375em;
	height: 0.375em;
	border-bottom: 0.125em solid red;
	border-left: 0.125em solid red;
	transform: rotate(45deg) translateY(-30%);
}

棒付き矢印

<p class="arrow">棒付き矢印</p>

.arrow {
  position: relative;
  font-size: 30px;
  padding-left: 70px;
}
.arrow::before{
  content: '';
  width: 14px;
  height: 14px;
  position:absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 35px;
  transform: rotate(45deg);
  display: inline-block;
  border-top: orange 5px solid;
  border-right: lawngreen 5px solid;
}
.arrow::after{
  content: '';
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 1px;
  width: 50px;
  height: 5px;
  background-color: aqua;
}