【8/27まで】Udemyの人気コースが今なら1,200円から!!

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

【CSS3】疑似要素「after」の使い方

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

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

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

See the Pen
pseudo-element-after1
by shiakisudev (@shiakisu)
on CodePen.


STEP.2
要素の後ろに文字を足す
CSSで疑似要素「::after」を使うことによって各要素の後ろに「>」を付けています。

See the Pen
pseudo-element-after2
by shiakisudev (@shiakisu)
on CodePen.


注意
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: ">";
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です