Remove Separaor From Last Menu Item

Hi

I have an unordered list in my footer with separaors in between each link. Have been trying to remove the last separator from the last link but with no joy.

This is what I have.

footer ul {
display: flex;
list-style-type: none !important;
margin: 0 !important;
padding: 0 0 10px 0 !important
}
footer ul li p:before {
display: none !important;
}
footer ul li p {
display: inline !important;
list-style-type: none !important;
padding: 0 !important;
}
footer p {
color: #fff !important;
font-size: 0.9rem;
margin: 0 !important;
padding: 0 !important;
}

footer li:after {
content: " | ";
padding-right: 8px;
}
footer li:last-of-type {
content: "";
}
footer .content-wrapper li a {
color: #fff !important;
font-size: 0.9rem;
font-weight: normal;
text-decoration: none !important;
}
footer .content-wrapper a:hover {
color: #ff662f !important;
}
footer .content-wrapper a:active {
color: #ff662f;
}

What am I doing wrong?

Much appreciated.

7 hours ago, DavvaMC said:

Hi

I have an unordered list in my footer with separaors in between each link. Have been trying to remove the last separator from the last link but with no joy.

This is what I have.

footer ul {
display: flex;
list-style-type: none !important;
margin: 0 !important;
padding: 0 0 10px 0 !important
}
footer ul li p:before {
display: none !important;
}
footer ul li p {
display: inline !important;
list-style-type: none !important;
padding: 0 !important;
}
footer p {
color: #fff !important;
font-size: 0.9rem;
margin: 0 !important;
padding: 0 !important;
}

footer li:after {
content: " | ";
padding-right: 8px;
}
footer li:last-of-type {
content: "";
}
footer .content-wrapper li a {
color: #fff !important;
font-size: 0.9rem;
font-weight: normal;
text-decoration: none !important;
}
footer .content-wrapper a:hover {
color: #ff662f !important;
}
footer .content-wrapper a:active {
color: #ff662f;
}

What am I doing wrong?

Much appreciated.

Can you share your URL so I can check it?