How to add Chevron at the end of each list item, aligned from the right

user_8211528 0
Viewed 776

I want to add a Chevron, at the end of each li, and I want to align all the Chevrons 5px from the end of the ul, like the image below:

enter image description here

How can I achive this?

ul {
  background-color: cyan;
  width: 120px;
}
<ul>
  <li><a href="#">Cars</a></li>
  <li><a href="#">Real Estate</a></li>
  <li><a href="#">Fashion</a></li>
  <li><a href="#">Sports</a></li>
</ul>

P.S. I am using font awesome's chevron: <i class="fas fa-chevron-right"></i>

css html
2 Answers

Use :after selector for this

ul {
  background-color: cyan;
  width: 120px;
}
ul li a:after {
  content:">";
  float: right;
  margin-right: 10px;
}
<ul>
  <li><a href="#">Cars</a></li>
  <li><a href="#">Real Estate</a></li>
  <li><a href="#">Fashion</a></li>
  <li><a href="#">Sports</a></li>
</ul>

Or using Fontawesome

ul {
  background-color: cyan;
  width: 120px;
}
ul li a .fas {
  float: right;
  margin-right: 10px;
  font-size: 10px;
  line-height: 1.6;
}
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<ul>
  <li><a href="#">Cars <i class="fas fa-chevron-right"></i></a></li>
  <li><a href="#">Real Estate <i class="fas fa-chevron-right"></i></a></li>
  <li><a href="#">Fashion <i class="fas fa-chevron-right"></i></a></li>
  <li><a href="#">Sports <i class="fas fa-chevron-right"></i></a></li>
</ul>

user_63641900

I used:

<i class="fa fa-chevron-right"></i>

Also, these shivrons work as links.

ul {
  background-color: cyan;
  width: 120px;
}

ul li i{
  float: right;
  margin-right: 5px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<ul>
  <li><a href="#">Cars <i class="fa fa-chevron-right"></i></a></li>
  <li><a href="#">Real Estate <i class="fa fa-chevron-right"></i></a></li>
  <li><a href="#">Fashion <i class="fa fa-chevron-right"></i></a></li>
  <li><a href="#">Sports <i class="fa fa-chevron-right"></i></a></li>
</ul>

user_135734440
Related