Как добавить шеврон в конце каждого элемента списка, выровненного справа

Я хочу добавить шеврон в конце каждого li и выровнять все шевроны на расстоянии 5 пикселей от конца ul, как показано на рисунке ниже:

Как я могу этого добиться?

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. Я использую шрифт awesome's chevron: <i class = "fas fa-chevron-right"></i>

html css

14.12.2020 08:22

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

1 095

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Используйте для этого селектор :after

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>

Или с помощью 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>

Вы можете получить лучшее из обоих миров, используя font-awesome и в первом примере. Просто установите :after, чтобы использовать шрифт font awesomes, и измените content, чтобы иметь правильный символ (используйте тот, который CSS Fontawesome использует для этой иконки.) Вот так

— 14.12.2020 08:36

14.12.2020 08:25

Я использовал:

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

Также эти шивроны работают как звенья.

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>

14.12.2020 08:36

Другие вопросы по теме

Как переместить переднее изображение, не затрагивая заднее изображение в JavaScript?

CSS - установить дочернюю ширину больше, чем ширина родителя с абсолютной позицией

Max функция CSS с процентным аргументом не работает с элементом th

Влияние CSS display:none на DOM

Как я могу активировать значок, используя идентификатор, а не класс, и как я могу автоматически удалять и добавлять его?

Sass анимационные миксины с использованием include

Chrome на iPhone переполняет контент на пустой странице (только на новой вкладке, без перезагрузки)

Как использовать путь svg в качестве фавикона

Проблема с заглавными буквами в текстовом поле

Display: flex & justify-content: space-evenly

Как добавить шеврон в конце каждого элемента списка, выровненного справа

Ответы 2

Другие вопросы по теме

Похожие вопросы