我如何获得以下虚线跨度线效果？

Question

我想做以下事情：

这是我的尝试：

<span class="cta-span"> or </span>

.cta-span {
text-transform: uppercase;
font-size: 18px;
color: #F3F3F3;
font-weight: 200;
background: url('line.png');
}

Answer 1

我认为最好的方法是使用 before 和 after 伪元素：DEMO

.cta-span {
  text-transform: uppercase;
  font-size: 18px;
  color: red;
  font-weight: 200;
  display:block;
  position:absolute;
  text-align:center;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}
.cta-span:before,.cta-span:after{
  content:"";
  position:absolute;
  width:2px;
  height:70px;
  left:50%;
  transform:translateX(-50%);
  background-color:red;
}
.cta-span:before{
  top:-120px;
}
.cta-span:after{
  bottom:-120px;
}

我如何获得以下虚线跨度线效果？

How do I have the follow dashed span line effect?

html

css

css-float