Diagonal lines in UL - html

Question

I'm pretty new to coding so please keep that in mind.
So I'm working on a little website, and I'm trying to stylise the header and nav bar. I'm trying to do some diagonal lines to seperate the different items in it, but I can't seem to make them appear.
I'd like to do something like this, with a simple drop shadow.
So here's my HTML and CSS
<nav>
<div class="logo"></div>
<ul>
<li>Home</li>
<li>Game</li>
<li>Infos</li>
<li>Contact</li>
<li><a class="active" href="#help">Help</a></li>
</ul>
</nav>
And
nav ul{
list-style: none;
float: right;
margin: 0;
padding: 0;
display: flex;
}
nav ul li {
list-style: none;
}
nav ul li a {
line-height: 80px;
color: #151515;
padding: 12px 30px;
text-decoration: none;
text-transform: uppercase;
transition: .3s;
}
nav ul li a:hover{
color: #F16918;
text-shadow: 2px;
}
To be clear, everything in the image is already done and coded, except for the diagonal lines that I painted over in Photoshop.
My header switch to black when scrolling (white on top over the image), so that's why the text never says its black, but it is in the image.
So I was wondering if anyone could help me get those diagonal lines?
Thanks a lot!

Answer 1

Try this (using pseudo element)..adjust at your needs.
CSS
nav ul{
list-style: none;
float: right;
margin: 0;
padding: 0;
display: flex;
}
nav ul li {
list-style: none;
position: relative;
}
nav ul li:after {
position: absolute;
content:"";
width: 1px;
height:100%;
background: #000;
transform: rotate(-45deg);
top:0;
left:0;
}
nav ul li a {
line-height: 80px;
color: #151515;
padding: 12px 30px;
text-decoration: none;
text-transform: uppercase;
transition: .3s;
}
nav ul li a:hover{
color: #F16918;
text-shadow: 2px;
}
CSS WITH SHADOW
nav ul li:after {
position: absolute;
content:"";
width: 1px;
height:100%;
background: transparent;
transform: rotate(-45deg);
top:0;
left:0;
box-shadow: -4px 0 1px rgba(0,0,0,0.2);
}
HTML
<nav>
<div class="logo"></div>
<ul>
<li>Home</li>
<li>Game</li>
<li>Infos</li>
<li>Contact</li>
<li><a class="active" href="#help">Help</a></li>
</ul>
</nav>
DEMO HERE