Fit-content не работает с элементом ::before? ⇐ CSS

[Anonymous]

Код: Выделить всё

::before

псевдоэлемент в диапазоне оборачивает себя.

Код: Выделить всё

span {
position: relative;
font-size: 1rem;
}

.float-left {
display: block;
}

.float-left::before {
content: "Float: Left --> *Passwords do not match.";
float: left;
top: 300px;
}

.whitespace {
white-space: nowrap;
}

.whitespace::before {
position: absolute;
content: "white-space: nowrap *Passwords do not match.";
top: 100px;
}

.min-width {
min-width: fit-content;
}

.min-width::before {
position: absolute;
content: "min-width --> *Passwords do not match.";
top: 200px;
}

Код: Выделить всё

Test

Я решил это с помощью пробелов: nowrap, но Недавно я видел видео, в котором упоминались потенциальные проблемы переполнения при таком подходе. В видео предложено альтернативное решение, но в моем примере min-width: fit-content похоже, не работает так, как ожидалось в видео. Пока я возился, я обнаружил, что использование float: left решило проблему (хотя я не слишком знаком с float, я хотел сказать, потому что для цели вопроса). Не могли бы вы объяснить, почему это не работает, и поделиться, если у вас есть какие-либо дополнительные знания? Спасибо, что нашли время прочитать это.

Подробнее здесь: https://stackoverflow.com/questions/787 ... re-element