CSS::Before — разрыв линии ⇐ CSS

[Гость]

Я не очень разбираюсь в CSS, я искал в Интернете и не смог найти решения этой проблемы. По какой-то причине ::before и текст не остаются в одной строке. У меня есть другой шаблон, и он работает нормально.
Я попробовал «white-space: nowrap», но он не работает. Я перешел на отображение встроенных блоков, это работает, но меняет все интервалы по сравнению с Flex. Я пытаюсь понять, почему это произошло и почему один и тот же код вызывает разные эффекты. Я следую руководству на YouTube и шаг за шагом копирую код, но результат не тот.

Моя страница:



Его страница:

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

.container {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
margin: 1.5rem;
}

ul {
display: flex;
flex-direction: column;
flex: 3 0;
justify-content: space-evenly;
border: 1px solid #ffbbbb;
border-radius: 1rem;
list-style-type: none;
margin: .5rem;
padding: 0;
}

ul li {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
border-bottom: 1px solid #e4e4e4;
}

ul li:last-child {
border: none;
}

ul li img {
width: 5rem;
height: 5rem;
border-radius: 100rem;
object-fit: cover;
}

ul li div {
padding: 5px;
}

ul li div:not(:first-child) {
flex-basis: 18%;
}

ul li select {
width: 3rem;
outline: none;
border: none;
border-bottom: 1px solid lightgrey;
font-weight: 100;
}

ul .remove-button {
border-radius: 1rem;
border: none;
padding: .5rem;
color: var(--primary-color);
opacity: .7;
outline: none;
}

ul .remove-button:hover {
opacity: 1;
cursor: pointer;
}

.checkout {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
flex: 1 3;
height: 20rem;
border: 1px solid #ffbbbb;
border-radius: 1rem;
padding: .5rem;
margin: .5rem;
}

.checkout>div {
font-size: 1.4rem;
margin: 1rem;
flex: 3;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}

.checkout .foods-count {
margin-bottom: 1.5rem;
}

.checkout .foods-count::before {
content: 'Count: ';
color: grey;
}

.checkout .total-price::before {
content: 'Price: ';
color: grey;
}

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

[list]
[*]




{{ cartItem.food.name }}



1
2
3
4
5


{{ cartItem.price | currency }}


Remove


[/list]


{{ cart.items.length }}

{{ cart.totalPrice | currency }}

Источник: https://stackoverflow.com/questions/781 ... g-the-line