Menu
Using CSS to create a horizontal navigation I want to use a divider between the elements.
using:
li:before
{
content: " | ";
}
I get a divider. But i wanna use a margin between the text and the divider
item(margin-right) |(?)item(margin-right)
how can I set a margin to the above question mark? With a margin-left (or padding-left) the margin will exist in front of the divider, not between the divider and the content.
1000
In CSS, you can use either the margin or padding properties to add space around elements. Additionally, the text-indent property adds space to the front of the text, such as for indenting paragraphs.
The :after selector in CSS is used to add same content multiple times after the content of other elements. It inserts something after the content of each selected element. Example 1: This example uses :after selector to add space after an element.
The ::before selector inserts something before the content of each selected element(s). Use the content property to specify the content to insert. Use the ::after selector to insert something after the content.
In CSS, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
As a quick hack, you can add a non-breaking space by using the escaped unicode for it:
li:before {
content: "\00a0 | \00a0";
}
See this fiddle.
But the better solution is to set a margin-left AND margin-right (or padding) for the pseudo element:
li:before {
content: "|";
margin-left: 20px;
margin-right: 20px
}
See this fiddle.
100
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
