css - css :コンテンツの間隔の前

Question

CSS を使用して水平方向のナビゲーションを作成する 要素間に仕切りを使用したいと考えています。

使用:

li:before
{
  content: " | ";
}

私は仕切りを取得します。しかし、テキストと仕切りの間に余白を使いたい

item(margin-right) |(?)item(margin-right)

上記の疑問符にマージンを設定するにはどうすればよいですか? margin-left (または padding-left) を使用すると、マージンは仕切りとコンテンツの間ではなく、仕切りの前に存在します。

Answer 1

簡単なハックとして、エスケープされた Unicode を使用して非改行スペースを追加できます。

li:before {
  content: "\00a0 | \00a0";
}​

このフィドルを参照してください。

しかし、より良い解決策は、疑似要素に margin-left AND margin-right (またはパディング) を設定することです。

li:before {
  content: "|";
  margin-left: 20px;
  margin-right: 20px
}

このフィドルを参照してください。

Answer 2

これを試してください

li:before {
          content: "|";
          padding:0 5px;
        }