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