How can I add vertical lines after each link?

Question

-I want to add vertical lines independent of the font-size of the links. I tried to add right-border but It changes according to the element(font size of the text).
-What I cant do is increase the height of the right-border.
-When I decrease the font-size the right-border also decrease but I dont want that.
-I want the vertical line to cover the navBar(the bar with color:#666666)

My code:https://code.sololearn.com/WNb34hF6AIeJ/#html

The thing I actually want:https://pasteboard.co/I1Cdvf1.jpg

Note:The broken image is a logo (ignore the image please)

I really need help. Thanks :)

Answer 1

https://code.sololearn.com/Wy94JVsa5Hlw/#html
This might help😁

Answer 2

• Predefined height of .navBar
And padding to it's child elements, which made the child being outside of parent element

• Also padding-left & padding-right to <a> tag inspite of main padding

Answer 3

adding some padding to element might help.

Answer 4

See that in 'Inspect Element' (Ctrl+Shift+I)
It would be clearly there.

Answer 5

Already tried.

Answer 6

What was the issue here Jaydeep Khatri ?

Answer 7

Why padding left and right to a tag would be an issue? also why height of .navBar predefined is a problem?

Answer 8

I suggest you to use line-height on links instead of padding.
That's how your element height will not be affected by your font size.

Links should also be block elements.

a {
display: inline-block;
padding: 0 10px;
line-height: 30px;
}