machen einen Pfeil mit vor + nach

Question

Guten Tag ich aa Link haben, die Text wie diese + Pfeil suchen haben muss:

I Pfeil getan haben, aber nicht wissen, wie das weiße Hintergrund machen die Sache ist, ich habe Pseudoelemente verwenden

.hiretext{ 
 
\t margin-top:185px; 
 
\t padding:5px 2px 5px 5px; 
 
\t position:absolute; 
 
\t background-color: #1a1e27; 
 
\t color:white; 
 
\t font-family:FrutigerCELight,Arial,Helvetica,sans-serif; 
 
\t font-size:20px; 
 
\t text-transform: uppercase; 
 
\t font-weight: 900; 
 
} 
 
.hirelink{ 
 
\t display:inline-block; \t \t 
 
    \t width: \t 0; \t \t 
 
    \t height: \t 0; 
 
\t border-top: \t solid transparent; 
 
\t border-bottom: solid transparent; 
 
\t border-left: solid black; \t 
 
\t border-width:7px; 
 
\t content:' '; 
 
\t }

<div class="hiretext"> 
 
\t \t <a href="#" class="hirelink"> 
 
\t \t \t hire us 
 
\t \t </a> 
 
</div> \t

Answer 1

So erstellen Sie ein Pseudo-Element. Ändern Sie einfach die Farbe.

.hiretext { 
 
    margin-top:105px; 
 
    padding:5px 2px 5px 5px; 
 
    position:absolute; 
 
    color:white; 
 
    font-family:FrutigerCELight,Arial,Helvetica,sans-serif; 
 
    font-size:20px; 
 
    text-transform: uppercase; 
 
    font-weight: 900; 
 
} 
 

 
.hirelink { 
 
    position: relative; 
 
} 
 

 
.hirelink:after { 
 
    content: ''; 
 
    border-left: 10px solid black; 
 
    border-top: 6px solid transparent; 
 
    border-bottom: 6px solid transparent; 
 
    width: 0; 
 
    height: 0; 
 
    position: absolute; 
 
    top: 10px; 
 
    right: -42px; 
 
} 
 

 
.hirelink:before { 
 
    content: ''; 
 
    height: 30px; 
 
    width: 30px; 
 
    background: red; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
    top: 0; 
 
    right: -50px; 
 
}

<div class="hiretext"> 
 
    <a href="#" class="hirelink"> hire us</a> 
 
</div> \t

Hoffe, es hilft. Prost!

Answer 2

versuchen Sie dies:

.hiretext { 
 
    padding: 5px 2px 5px 5px; 
 
    position: absolute; 
 
    background-color: #1a1e27; 
 
    font-family: FrutigerCELight, Arial, Helvetica, sans-serif; 
 
    font-size: 20px; 
 
    text-transform: uppercase; 
 
    font-weight: 900; 
 
    width: 200px; 
 
} 
 
.hirelink { 
 
    position: relative display: inline-block; 
 
    color: white; 
 
} 
 
.hirelink:after { 
 
    content: "►"; 
 
    position: absolute; 
 
    right: 5px; 
 
    margin: auto; 
 
    background: white; 
 
    color: #1a1e27; 
 
    border-radius: 15px; 
 
    width: 28px; 
 
    text-align: center; 
 
    height: 28px; 
 
    font-size: 20px; 
 
}

<div class="hiretext"> 
 
    <a href="#" class="hirelink"> 
 
\t \t \t hire us 
 
\t \t </a> 
 
</div>