Wie soll ich diesen Pfeil nebenher hinzufügen?

Question

a.arrow::after { 
    display:block; 
    content: ""; 
    width: 63px; 
    height: 59px; 
    background-image: url(../../img/arrow.png); 
    position: relative; 
    background-repeat: no-repeat; 
} 

Wie man den Pfeil neben uns setzt?

aroow

navigation

Answer 1

Sie können sie in einer ungeordneten Liste setzen, keine Notwendigkeit, Breite und Höhe, nur setzen Polsterung, wenn Sie sie das gleiche und die Linie bis verhalten wollen; Wenn Sie einen Pseudo verwenden möchten, würde ich die Verwendung der Zeilenhöhe empfehlen, wenn Sie wissen, dass sie niemals einen Zeilenumbruch ausführen wird.

versuchen, etwas so und daran anpassen:

.inline-list { 
 
margin: 0; 
 
padding: 0; 
 
list-style: none; 
 
} 
 

 
.inline-list li { 
 
display: inline-block; 
 
padding: 1em 2em; 
 
background: aqua; 
 
}

<ul class="inline-list"> 
 
<li>About Us</li> 
 
<li>></li> 
 
</ul>

Answer 2

versuchen, diesen Ansatz: Sie die Position des Pfeils einstellen können nach Ihrem Bedarf.

.sp{ 
 
\t display: flex; 
 
\t justify-content: center; 
 
} 
 
.p li{ 
 
\t list-style-type: none; 
 
} 
 
.p{ 
 
\t display: flex; 
 
\t width: 70%; 
 
    justify-content: space-between; 
 
} 
 

 
.icon_p{ 
 
\t position: relative; 
 
} 
 

 
.icon:after{ 
 
\t content: '▼'; 
 
\t position: absolute; 
 
\t left: 65px; 
 
\t top: 0px; 
 
\t right: 0px; 
 
\t bottom: 0px; 
 
}

<div class="sp"> 
 
    <div class="p"> 
 
     <li><a href="#">Portfolio</a></li> 
 
     <li class="icon_p"><a href="#" class="icon">About</a></li> 
 
     <li><a href="#">Blog</a></li> 
 
     <li><a href="#">GetInTouch</a></li> 
 
    </div> 
 
</div>