2022/12/19

【My Study Note】Pseudo-elements

CSS Programming

Pseudo-elements

Syntax

Syntax
selector::pseudo-element {
 property: value; 
}

::first-letter

You can use “first-letter” to change the color of just the first letter of each element.

::first-line

First-line will change the complete first line of each element.

::selection

li::selection {
    color:brown;
    background-color: antiquewhite;
    line-height: 1;
}

For example, you may use it when you are taking notes on your device because it allows you to highlight specific text. The effect of it becomes obvious only after the user selects content. On web pages today, you will typically see inverted colors from white-black to black-white when selecting a portion of text.

::marker

li::marker {
    color: cornflowerblue;
    content: '<> ';
    font-size: 1.1em;
}

Markers are typically used to add style elements to a list, for instance, to color bullet points.

::before and ::after

They allow you to add content before and after an element on which they are allowed. In other words, new content can be added to a page without adding HTML code for it. You can also add styling options for this content.

CSS Programming

• Tweet
• LINE
• facebook