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.