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

Question

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:

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>

score 3 · Accepted Answer · edited Dec 14 '20 at 21:37

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>

You can get the best of both worlds by using font-awesome in the first example as well. Just set the `:after` to use font awesomes font and change the `content` to have the correct char (use the one the fontawesome css are using for that icon.) [Like this](https://stackoverflow.com/a/50559557/2453432) — M. Eriksson, Dec 14 '20 at 07:36

score 2 · Answer 2 · answered Dec 14 '20 at 07:36

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>

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

2 Answers2