CSSセレクタ-Pseudo-elements

Pseudo-elements

擬似要素は、セレクタの最後に追加して要素の一部を選択できる2つのコロンの前にあるキーワードです.

::after

選択したエレメントの最後尾にある擬似エレメントを作成します.contentプロパティとともに使用して、選択した要素に装飾的な内容を追加します.デフォルトではインラインされています.

/* CSS3 syntax */
::after

/* CSS2 syntax */
:after

/* Add an arrow after links */
a::after {
  content: "→";
}

    
Here is some plain old boring text.
    
Here is some normal text that is neither boring nor exciting.
    
Contributing to MDN is easy and fun.
    

    

    

    Look at the orange box after this text. 
    

    

    

    
Here we have some
        text with a few
        tooltips.
    

.exciting-text::after {
    content: " 

::before

選択したエレメントの先頭にある擬似エレメントを作成します.contentプロパティとともに使用して、選択した要素に装飾的な内容を追加します.デフォルトではインラインされています.

/* Add a heart before links */
a::before {
  content: "♥";
}

/* CSS3 syntax */
::before

/* CSS2 syntax */
:before

    Some quotes, he said, are better than none.
    

    

    

    Notice where the orange box is.
    

    

    

    

        
Buy milk
        
Take the dog for a walk
        
Exercise
        
Write code
        
Play music
        
Relax
    

q::before { 
    content: "«";
    color: blue;
}

q::after { 
    content: "»";
    color: red;
}

.ribbon {
    background-color: #5BC8F7;
}

.ribbon::before {
    content: "Look at this orange box.";
    background-color: #FFBA10;
    border-color: black;
    border-style: dotted;
}

li {
    list-style-type: none;
    position: relative;
    margin: 2px;
    padding: 0.5em 0.5em 0.5em 2em;
    background: lightgrey;
    font-family: sans-serif;
}

li.done {
    background: #CCFF99;
}

li.done::before {
    content: '';
    position: absolute;
    border-color: #009933;
    border-style: solid;
    border-width: 0 0.3em 0.25em 0;
    height: 1em;
    top: 1.3em;
    left: 0.6em;
    margin-top: -1em;
    transform: rotate(45deg);
    width: 0.5em;
}

var list = document.getElementsByTagName("ul");
list.addEventListener("click", function (ev) {
    if (ev.target.tagName === "LI") {
        ev.target.classList.toggle("done");
    }
}, false);

::first-letter

ブロックレベル要素の最初の行の最初のアルファベットにスタイルを適用します.前の問題はブロックレベル要素の前に他の内容がありません.
::first-letter擬似要素で許可されるプロパティ

/* Selects the first letter of a 
 */
p::first-letter {
  font-size: 130%;
}

/* CSS3 syntax */
::first-letter

/* CSS2 syntax */
:first-letter

    
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
        ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
        dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.
    
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
    
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
        aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
        esse molestie consequat.
    
-The beginning of a special punctuation mark.
    
_The beginning of a special punctuation mark.
    
"The beginning of a special punctuation mark.
    
'The beginning of a special punctuation mark.
    
*The beginning of a special punctuation mark.
    
#The beginning of a special punctuation mark.
    
「           。
    
《           。
    
“           。

P::first-letter {
    color: red;
    font-size: 130%;
}

::first-line

ブロックレベル要素の最初の行にスタイルを適用します.最初の行の長さは、要素の幅、ドキュメントの幅、文字のフォントサイズなど、多くの要因の影響に基づいていることに注意してください.
::first-line擬似要素が許可する属性

/* Selects the first line of a 
 */
p::first-line {
  color: red;
}

/* CSS3 syntax */
::first-line

/* CSS2 syntax */
:first-line

    
Styles will only be applied to the first line of this paragraph.
        After that, all text will be styled like normal. See what I mean?

    The first line of this text will not receive special styling
        because it is not a block-level element.

::first-line {
    color: blue;
    text-transform: uppercase;
    /* WARNING: DO NOT USE THESE */
    /* Many properties are invalid in ::first-line pseudo-elements */
    margin-left: 20px;
    text-indent: 20px;
}

::selection

ユーザーによって強調表示されたドキュメント部分にスタイルを適用します.
この疑似要素は、次のCSSプロパティとともにのみ使用できます.color background-color cursor caret-color outline text-decoration text-emphasis-color text-shadow

::selection {
  background: cyan;
}

/* Legacy Firefox syntax (version 61 and below) */
::-moz-selection

::selection

    This text has special styles when you highlight it.
    
Also try selecting text in this paragraph.

/* Make selected text gold on a red background */

::selection {
    color: gold;
    background: red;
}


/* Make selected text in a paragraph white on a blue background */

p::selection {
    color: white;
    background: blue;
}

::backdrop

ビューポートサイズのボックスが、フルスクリーンモードの要素の下に表示されます.この擬似要素は実験段階にあり、ブラウザの互換性に注意してください.

/* Backdrop is only displayed when dialog is opened with dialog.showModal() */
dialog::backdrop {
  background: rgba(255,0,0,.25);
}