Вопрос Как сделать вот такие линии в css

как сделать вот такие линии

Обычный border подойдет.

Символ | на клавиатуре.

Ты можешь задать для ссылок border-right вместе с padding. При этом укажи a:last-child{border: none} Чтобы у последней ссылки не было линии

Вставить между элементами тег <hr>, задача которого как раз добавлять линии, и через CSS присвоить новую толщину и высоту на n% от родителя. Удобство в том, что они не привязаны к самим элементам, а являются настоящими разделителями... что позволит, скажем, чем всяких проблем использовать border-radius на пунктах меню... да и сами разделители можно сделать более плавными.

Вот наглядный пример использования...
logo
Home Page
Products
Contact
Page
.menu {
position: relative;
box-sizing: border-box;
display: flex;
justify-content: right;
align-items: center;
width: 100%;
height: 60px;
padding: 0 5%;
background-color: #5678ee;
}

.menu div:first-child {
position: absolute;
left: 5%;
}

.menu div {
display: flex;
align-items: center;
height: 50%;
padding: 0 10px;
cursor: pointer;
border-radius: 10px;
transition: .2s;
}

.menu div:hover {
background-color: rgba(255,255,255,.2);
}

.menu hr {
width: 2px;
height: 30%;
background-color: rgba(0,0,0,.8);
margin: 0 10px;
border-radius: 2px;
}