псевдоэлемент, действующий как элемент сетки в сетке CSS

Я создаю форму с обязательными полями. Чтобы пометить их как требуемые, я помещаю звездочку (*) как элемент ::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/


html css css-grid pseudo-element
person Andrea    schedule 09.08.2017    source источник
comment
Псевдоэлемент создает такой же блок, как и фактический элемент. Что касается макета CSS, поле псевдоэлемента и поле фактического элемента - два вида. Вы обнаружите, что блоки псевдоэлементов ведут себя идентично блокам реальных элементов практически в любой другой ситуации.   -  person BoltClock    schedule 10.08.2017

Ответы (1)


arrow_upward
7
arrow_downward

Псевдоэлементы считаются дочерними элементами в контейнере сетки (как в гибком контейнере). Поэтому они приобретают характеристики элементов сетки.

Вы всегда можете удалить элементы сетки из потока документов с помощью абсолютного позиционирования. Затем используйте свойства смещения CSS (left, right, top, bottom), чтобы переместить их.

Вот простой пример:

html {
  width: 75%;
}

ul {
  list-style: none;
}

input {
  width: 100%
}

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

li {
  position: relative;
}

li.required::after {
  content: '*';
  font-size: 15px;
  color: red;
  position: absolute;
  right: -15px;
  top: -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>

person Michael Benjamin    schedule 09.08.2017