擬似要素とjQuery -クリックイベント編-

またまたWeb系の雑記になります。
とは言っても今回は、やりたかったことが出来なかったというお話し。

CSSには、擬似クラス・擬似要素というものが存在します。有名な擬似要素は

の2つ。:afterはclear fixに用いられることで有名です。

今回は、Webサイトを作成中に:beforeを使って、文字列を表示させるということをやってみたのですが、その際につまずいた所です。

何をやりたかったかというと、「:beforeで表示された文字列をクリックした時に、jQueryで書いたスクリプトを実行する」というものでした。

<nav>
  <ul>
    <li>hoge</li>
    <li>hoge1</li>
  </ul>
</nav>

nav ul:before{
  content:"before";
}

上記のような場合に、“before”をクリックした時にulタグの子要素をfadeinするというようなものを、jQueryで作りたかったというわけです。

詰まった部分は、クリックされる“before”をどうやって、jQueryでとってくるかというところです。
少しばかり調べてみたのですが、結局見つからず…

そもそも:beforeや:afterで表示されている文字列は、ブラウザで表示した場合にソースに存在しないというのが、原因なのではないかという予想を個人的には立てています。
現在の仕様では、擬似要素をjQueryオブジェクト化できない、という説明であっているんでしょうかね。

ここまで書いておいて、実はjQueryをちゃんと勉強していないので、見落としがあったり記述間違いがあったりする可能性大です。もし、実装する方法がありましたら、ご教授お願いします。

ちなみに、Webサイトのほうは擬似要素を使わずに済むようにHTMLを少々変更し、jQueryによるクリックイベントを書いたので、問題自体はありません。ただ、擬似要素のクリックイベントがやってみたかったというだけなんです