даю форму, которая имеет обязательные поля. Чтобы пометить их как обязательные, я ставлю звездочку (*) как::before элемент и плавающий прямо так, чтобы это было в верхнем правом углу поля.

У меня проблема в том, что некоторые из этих полей располагаются с помощью CSS-сеток, и когда я добавляю::before элемент сетки, он рассматривается как другой элемент сетки и переносит все в новую строку сетки.

Почему CSS-сетки обрабатывают::before элемент как еще один элемент сетки? Как бы я сделал звездочку, как элементы ввода?

Вот основной HTML / CSS:

html {
  width: 75%;
}

ul {
  list-style: none;
}

input {
  width: 100%
}

.grid {
  display: grid;
  grid-template-columns: .33fr .33fr .33fr;
}

li.required::before {
  content: '*';
  float: right;
  font-size: 15px;
}

<ul>
  <li class="required">
    <input type="text">
  </li>
  <li class="grid required">
    <p>one</p>
    <p>two</p>
    <p>three</p>
  </li>
  <li class="required">
    <input type="text">
  </li>
</ul>

Вот скрипка:https://jsfiddle.net/zbqucvt9/