css – Exactly what is the issue with this prior to Psuedo component?

So, I was attempting to produce a standard hover computer animation in my Navbar for a respond application utilizing psuedo elemts of css. When I attempted to carry out the code this issue came and also I do not recognize the specific factor behind it.

I have actually utilized bootstrap to produce a basci and afterwards attempted to execute my very own css

<< div className=" collapse navbar-collapse" id=" navbarSupportedContent">
<> < ul className=" navbar-nav me-auto mb-2 mb-lg-0">>.
<< li className=" nav-item">
<> < a className=" food selection nav" aria-current=" web page" href=" #">> Residence< .
<< li className=" nav-item">
<> < a className=" food selection nav" href=" #">> Products< .
<.
<.

 #navbarSupportedContent {
setting: loved one;
top: 5.78 px;
margin-left:.4 em;
}

. nav {
font-family: var(-- font-1);
font-size: 1.2 em;
shade: var(-- color-1);
text-decoration: none;
}

#navbarSupportedContent ul li: not(: last-child) {
margin-right: 1em;
}

. food selection:: prior to {
web content: "";.
setting: outright;.
base: 0;.
left: 0;.
size: 0;.
elevation: 4px;.
history: var(-- color-1);.
border-radius: 50px;.
change: translateY( -4 px);.
shift: size.5 s simplicity;.
}

. food selection: float:: prior to {
size: 100%;.
}

THIS ➡

THIS ➡

Please aid me by mentioning the mistake so, that I can repair this concern.