CSSの疑似要素:beforeと:afterでUI要素を実装するテクニックのまとめ

CSSの疑似要素は非常に便利です。疑似要素:beforeと:afterを使用したUI要素を実装する便利なテクニックを紹介します。 Webページやスマホアプリで使えるUI要素をはじめ、クリック・タップ可能領域を広げたり、:afterと:beforeのどちらを使うべきかなど、知っておくと役立つ疑似要素のテクニックです。 Uncommon Use Cases For Pseudo Elements by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 疑似要素で、親子のホバーエフェクト 一覧のリスト 疑似要素で、クリック可能領域のサイズを広くする 疑似要素を使用したオーバーレイ 疑似要素で、シャドウエフェクト :afterと:beforeのどちらを使うべきか ファイル拡張子を元にリンクのスタイル設定 疑似要

[coliss]

[:before][:after]疑似要素:beforeと:afterを使用したUI要素を実装する便利なテクニック。

[bleu-bleut]

クリックできる範囲を広くするとか、子要素のホバーで離れたところの親要素にスタイルを適用するとか。

[kathew]

こういうの好き

[ultimate-ez]

擬似要素って、本来何のために作られたんだろう？っていつも思いながら色々作ってる。

[eagleyama]

ウーン、わかんない