この記事では、疑似要素「:after」の使い方を説明してきます。
疑似要素「::after」の使い方
STEP.2
要素の後ろに文字を足す
CSSで疑似要素「::after」を使うことによって各要素の後ろに「>」を付けています。
疑似要素::afterのcontentプロパティによって追加された文字はドラッグ出来ないのです!
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: ">";
}