Currently, I am working on a project that involves an ordered list (ol), and I am trying to add pseudo elements (::before,::after) to enhance its appearance. Strangely, when I write ::before and ::after separately, the styles are applied and visible on the server. However, when combined in one class, the changes do not show up on the live server. Below, you will find my code snippet along with screenshots from the live server.
Here is my code:
.cinema-seats__list:first-child::before
.cinema-seats__list:first-child::after {
content: "1";
}
If I remove .cinema-seats__list:first-child::after from the code, it starts working properly.
.cinema-seats__list {
display: flex;
justify-content: space-between ;
list-style: none;
padding: 0;
margin: 0;
}