Pseudo-element before in the form of an arrow
This is the easiest way without drawing a complex CSS.
Example
CSS
Create a link class .read and a pseudo-class .read::before into which we simply put ❯❯ in the content property.
.read {
border-left: 2px solid #502542;
border-bottom: 1px dashed #502542;
border-top: 1px dashed #502542;
width:100%;
padding-left:2rem;
padding-top: 1rem;
padding-bottom: 1rem;
}
.read::before {
color:#502542;
margin-left:-1.5rem;
margin-right:1rem;
content: "❯❯";
}
HTML
<a class="read" href="https://tp.media/r?marker=201961&p=4114&u=https%3A%2F%2Faviasales.ru">
Aviasales: Best airfare prices
</a>
<br>
<br>
<a class="read" href="https://tp.media/r?marker=201961&p=3460&u=https%3A%2F%2Fwww.flixbus.ru%2F">
Flixbus: Bus tickets across Europe
</a>
The result
Aviasales: Best airfare prices
Flixbus: Bus tickets across Europe
Article author: Andrei Olegovich