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

2020年8月1日2023年1月22日

この記事では、擬似要素「: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: ">";
}

以上で記事の解説はお終い！

HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ！同僚に差をつけよう！