Описание float 1

Создайте веб-страницу, как показано на рис. 1. Каждая строка является ссылкой целиком, звёздочка — обычный текстовый символ — ★. Вид в разных браузерах может незначительно отличаться.

Рис. 1

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Рецепты</title>
  <style>
   h2 { color: #a1bd57; }
   ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 200px;
   }
   li {
    margin-bottom: 3px;
   }
   li span {
    float: right;
    font-size: 0.8rem;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #e6e1d7;
    text-align: center;
    line-height: 20px;
   }
   a {
    color: #a58039;
    display: block; 
    text-decoration: none;
   }
   a::before {
    content: '★';
    color: #a44823;
    margin-right: 5px;
   }
  </style>
 </head>
 <body>
  <h2>Рецепты</h2>
  <ul>
   <li><a href="#"><span>10</span>Салаты</a></li>
   <li><a href="#"><span>12</span>Курица</a></li>
   <li><a href="#"><span>8</span>Рыба</a></li>
   <li><a href="#"><span>6</span>Десерт</a></li>
   <li><a href="#"><span>16</span>Выпечка</a></li>
  </ul>
 </body>
</html>