Wie kann der Inhalt eines Anker-Tags über seinen eigenen Rand hinauslaufen und so einen Ausschneideeffekt erzeugen? ⇐ HTML

[Guest]

Ich versuche, ein Anker-Tag wie folgt zu gestalten
Das Problem, das ich habe, ist, dass ich keine Möglichkeit finde, den rechten Rand auszuschneiden und so den in gezeigten Effekt zu erzielen das Bild.
Beachten Sie, dass es wichtig ist, dass die Hintergrundfarbe der Schaltfläche transparent ist und den Rand basierend auf der Zeilenhöhe des Textes ausschneidet.
Das ist, was ich Ich kann derzeit Folgendes erreichen:
Screenshot
HTML

Code: Select all

[url=#]Neem contact met ons op[/url]

CSS

Code: Select all

a {
display: inline-block;
color: red;
text-decoration: none;
position: relative;
text-align: center;
padding: 10px 20px;
}

a::before {
content: "";
width: 100px;
border: 1px solid red;
position: absolute;
top: 0;
bottom: 0;
left: 0;
height: 100%;
}