:afterと:beforeの理解と使用

:afterと:beforeの理解と使用
1.定義:
現在の要素のために装飾的な内容を追加して、自身のcontent属性を表示します.デフォルトではインライン要素の使用スタイルでノードを作成しますが、DOMツリーには表示されません.

2.使用:
使用する元素は前と後の二つの要素があると思います.

ello Worl

3.操作

	window.getComputedStyle(document.querySelector('li'), ':before')

:afterと:beforeは本当のノードではないので、ユーザーイベントをクリックしても設定できません.しかし、ユーザーイベントをキャプチャし、イベントのsrcelementオブジェクトは疑似要素のある要素です.疑似要素自体ではなく、documentは対応ノードオブジェクトを取得できません.しかし、cssインターフェースを通じてスタイルの属性を取得することができます.CSSStyleDeclarationオブジェクトを返します.現在のスタイル値を取得できます.
:afterと:before使用の経験

                 ，      ，   chrome   

1.     

         ，  ::after       ，     :not         。

  

2. border    

        border      ，            ，             。

  

3.    

            ，          svg    ，            ，          ，            。

  

4.webfont   

  webfont           i   ::after  ::before，                ，  http://fontello.com/，           svg    。       ，       。

5.   、  、      

                （      “*”  ），         ，  ::before            （              ）。

      （ ）   ，      。              ，                。

  

6.     

    《      :before   :after》       ，             “     ”  ，                   。

  

7.       placeholder   

        placeholder，      input      。  ::before            placeholder     。

  

8.          

           inline-box    ，       100% ::before               ，                 。

  

9.    

     ，bootstrap clearfix         。

  

10.  pointer-events       

     ，   ::after ::before            ，           ，        ::after ::before                  ，  pointer-events        。

  

        https://github.com/laden666666/css-before-and-after-test

        ，                 ，      ::after ::before   ，         。          ：

1. css       

2. css         ，           

3.          

4.  attr     

   ：

http://www.webhek.com/pseudo-element/

http://www.cnblogs.com/ys-ys/p/5092760.html

https://developer.mozilla.org/en-US/docs/Web/CSS/::after

原文の出所:https://blog.csdn.net/w405722907/article/details/79446038
を選択します