CSS、HTML パンくずリストの作成練習中の質問

Question

前提・実現したいこと

ここに質問の内容を詳しく書いてください。

プログラミングの課題で途中でパンくずリストを行っています。サルカワ（https://saruwakakun.com/html-css） Webサイトを参考にしてリストの使い方は分かったのですが課題のリストを作るとき、自分でできたこと③から課題完成までに途中で書き加えるCSSの過程と意味が理解できない（何のために書いたのか、書くとどうなるのか）部分があったので質問しました。よろしくお願いします。

＊初学者で現在は独学でプログラミングの勉強中です

発生している問題・エラーメッセージ

課題のHTML。

作りたいパンくずリストとそのCSS。

試したこと

①横並びにするため<li>の親要素の<ol>にdisplay:flexを設定して横ならびに。
②li::after {content: ">" ;でli の後ろに 「>」マークを付ける。
③「>」の両サイドにスペースを作るために「margin-left:6px;,margin-left:6px」を設定。すると下記の画像のようになってしまいました。
}

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[yambejp]

ソースは画像ではなくテキストで貼ってください
（問題のある表示は当然画像で貼ってもらって結構です）

Answer 1

<style>
nav ol{
list-style:none;
display:flex;
padding:0px;
}
li:not(:last-child)::after{
  content:">";
  margin-left:6px;
  margin-right:6px;
}
</style>
<nav>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
</nav>