Как мне получить эффект штриховой линии?

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; 
}