Programmiererforum

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

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

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][url=#]Neem contact met ons op[/url]
[/code]
CSS
[code]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%;
}
[/code]