Как обратиться к элементу до текста и после текста?

Question

Как сдвинуть крестик на одинаковое растояние от текста, но без изменения html кода?

Хотелось бы такое сделать только при помощи css

div i:first-child {
  margin: 0 20px 0 0;
}
div i:last-child {
  margin: 0 0 0 20px;
}

<div><i>+</i> Текст</div>
<div>Текст <i>+</i></div>

Answer 1

Ваш вариант сработает, только если обернуть "Текст" в какой-нибудь тег, например <span>.

div i:first-child {
  margin-right: 20px;
}
div i:last-child {
  margin-left: 20px;
}

<div><i>+</i><span>Текст</span></div>
<div><span>Текст</span><i>+</i></div>

Тогда :first-child и :last-child будут считаться корректно, а так текст не является элементом и в первом случае из вашего примера, <i> является и первым, и последним элементом, но т.к. в записи :last-child указан последним, то будет перезаписывать :first-child из-за чего видно, что отступ идёт слева.

Answer 2

Этот вариант, только при условии, что div потомок одного родителя

div:nth-child(1) i {
  margin: 0 20px 0 0;
}
div:nth-child(2) i {
  margin: 0 0 0 20px;
}

<div><i>+</i> Текст</div>
<div>Текст <i>+</i></div>

БЛОГ НА HUSL

Как обратиться к элементу до текста и после текста?

Ответы (2 шт):