CSSで最後の要素（last-child）へのafter指定方法

CSSにおいてちょっとした装飾をするときならbefore・afterを使うことでhtmlコードをシンプルにできます。

さて、最後の要素（last-child）のafterを消したい、あるいは変更したい。
でも、疑似クラスと疑似要素って同時に使えるのか？

そんな最後の要素（last-child）へのafter指定方法を説明します。

結論

以下のように指定します。

E:last-child::after

「一番最後のE要素のafter」に対する指定となります。

疑似クラスと疑似要素を同時に使うときは、基本的にbefore・afterは最後になるハズです。

例

• テキスト
• テキスト
• テキスト
• テキスト

html

<ul class="example">
    <li>テキスト</li>
    <li>テキスト</li>
    <li>テキスト</li>
    <li>テキスト</li>
</ul>

CSS

.example,.example li{
    list-style: none;
    margin: 0;
    padding: 0;
}
.example{
    display: flex;
}
.example li{
    padding: 5px 10px;
    background: #b4f2be;
    position: relative;
}
.example li::after{
    content: "";
    width: 1px;
    height: 1em;
    background: #333;
    position: absolute;
    right: 0;
    top: calc(50% - 0.5em);
}
.example li:last-child::after{/*コレ*/
    display: none;
}

afterで縦線を表現しています。両端には表示したくないので最後のafterを非表示にしています。

まとめ

疑似クラスと疑似要素って同時に使うときは次のようにします。

E:last-child::after

以上、CSSで最後の要素（last-child）へのafter指定方法でした。