擬似要素「::after」の使い方

2020年8月1日2021年4月17日

この記事では、擬似要素「:after」の使い方を説明してきます。

STEP.1

横並びのリストを用意する

STEP.2

要素の後ろに文字を足す

CSSで擬似要素「::after」を使うことによって各要素の後ろに「>」を付けています。

注意

Resultの結果をドラッグして確認してみてください。
擬似要素::afterのcontentプロパティによって追加された文字はドラッグ出来ないのです！

ソースを以下に抜粋しておきます。

HTML

<ul>
  <li>大項目</li>
  <li>中項目</li>
  <li>小項目</li>
</ul>

CSS

ul{
  list-style:none;
  padding-left:0px;
}

li{
    display:inline;
}

li:after{
  padding-left:10px;
  content: ">";
}