セレクタ(4)仮想要素セレクタ

3989 ワード

CSS 選択者ぎじげんそテキストリンク

仮想クラスとは異なり、cssはhtmlで仮想要素を作成して使用します.

::の使用

たまに:度→以前の方式もあります
(before/24579142の前にafterがある場合は、仮想要素セレクタです.混同しないでください!)

:

before-エレメント内部の前面に仮想エレメントとしてコンテンツを挿入

::beforeプロパティが必要です

🤦‍♂️ contentのマークが100個ある場合、
すべての要素に特定の内容を追加する必要がある場合...?(暗く、😱 )<li>

  <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
         ...
      <li>100</li>
  </ul>

html

  ul li::before {
      content: "no.";       /* content 속성 필수!! */
      font-weight: bold;
  }

after-エレメント内部の後にコンテンツを挿入

::afterプロパティが必要です

画像を挿入することもできます

  ul li::after {
      content: url("");
  }

この問題について(セレクタ(4)仮想要素セレクタ), 我々は、より多くの情報をここで見つけました https://velog.io/@aepee/선택자4가상-요소-선택자

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol