Можно ли не меняя разметку расположить элементы?

Question

[mishapsv]

Вот здесь пример
Есть лейблы, а перед текстом лейбла должна быть красная точка - обозначение обязательного поля.
Если текст лейбла короткий (1) - все отлично, красная точка стоит, как надо.
Но если текст длинный и текст переносится(2), то точка оказывается на левой границе блока, а не возле начала текста.
Можно ли это исправить только css-ом (править разметку очень нежелательно)?
Если нельзя, как бы вы поменяли разметку?

Answer 1

[Ankhena]

Не меняя разметки, да и стили только слегка: https://codepen.io/anon/pen/EdNqjp

Comments

[Ankhena]

mishapsv, что за браузеры вы собираетесь использовать что border-radius нужен с префиксом. Боюсь, что с флексами в них будут проблемы, даже с префиксами :)

[mishapsv]

Ankhena спасиб за помощь, только результат тот же)
Нужно, чтобы во втором лейбле красная точка прижималась к тексту, как в пером.
А сайчас к левой границе блока.

А префиксы автопрефиксером расставлены, я прост копировал из веб-инспектора и не все удалил.

[Ankhena]

mishapsv, А она прижата https://codepen.io/anon/pen/JmELqv
Вам, наверное, нужно почитать про инлайны и инлайн-блоки, переносы слов в них.
Возможно, вот так https://codepen.io/anon/pen/aRpYeY будет яснее, что происходит.

Вариант - это утопленная в контент точка https://codepen.io/anon/pen/wYgjKK

А префиксы автопрефиксером расставлены

Вот и удивительно какие версии вы собираетесь поддерживать

Answer 2

[skuvaWeb]

Если вы имеете перенос обеих точек, то измените свойство align-items у flex контейнера-родителя (.control-label в вашем случае)
Если вам нужно спозиционировать только 1 из 2 точек, то задайте родителю position: relative; а точке position: absolute; и двигайте как вам надо

Comments

[mishapsv]

skuvaWeb Нужно расположить только красную точку перед текстом. Текст, как видно в примере, не прижат к левой границе блока, абсолютное поз-ние не поможет.

Answer 3

[Stalker_RED]

label {
  position: relative;
}
label:before {
  position: absolute;
  left: .5em; top: 1em;
}

https://codepen.io/anon/pen/xyRobd

Comments

[mishapsv]

Stalker_RED спасибо за помошь! Но должно быть как раз таки наоборот, как в первом примере - красная точка прижата к тексту.