css - 在css中制作一个带尾部的非填充箭头

Question

如标题所示 - 尝试制作这样的箭头 ->(显然直线在点结束处结束)

这是我当前的 CSS:

.arrow {
  position: relative;
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  border-top: 0.1em solid;
  border-right: 0.1em solid;
  margin-right: 0.5em;
  transform: rotate(45deg);
}

.arrow:after{
  position: relative;
  padding-left: 1em;
  content: "";
  text-decoration: line-through;
  margin-bottom: 20px;
}

目前的主要问题是什么都没有排队。它需要以文本为中心

即:

阅读更多--->

Answer 1

试试这个

:root{padding: 20px}
a{
  position: relative;
  padding: 2px 6px;
  cursor: pointer
}
a:before,a:after{
  content: '';
  position: absolute;
  top: 50%;
}

a:before{
  width: 4px;
  height: 4px;
  background: black;
  left: 100%;
  margin-top: -2px;
  box-shadow: 8px 0 0 0 rgba(0,0,0,.6),
             16px 0 0 0 rgba(0,0,0,.4)
}
a:after{
  width: 6px;
  height: 6px;
  border-right: 4px solid rgba(0,0,0,.2);
  border-top:   4px solid rgba(0,0,0,.2);
  right: -30px;
  transform: rotate(45deg);
  margin-top: -4px
}

<a>Read more</a>