CSS Pseudo-elements

Latest Stories

CSS Pseudo-elements

Posted by Wikan wicaksono - 0 comments

CSS pseudo-elements are used to add special effects to some selectors.

Syntax

The syntax of pseudo-elements:

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

CSS classes can also be used with pseudo-elements:

selector.class::pseudo-element {
property:value;
}

The ::first-line Pseudo-element

The ::first-line pseudo-element is used to add a special style to the first line of a text.
The ::first-line pseudo-element can only be applied to block-level elements.

Example

Format the first line of the text in p elements:

p::first-line {
color: #ff0000;
font-variant: small-caps;
}

Try it yourself »

The following properties apply to the ::first-line pseudo-element:

font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

The ::first-letter Pseudo-element

The ::first-letter pseudo-element is used to add a special style to the first letter of a text.
The ::first-letter pseudo-element can only be applied to block-level elements.

Example

Format the first letter of the text in p elements:

p::first-letter {
color: #ff0000;
font-size: xx-large;
}

Try it yourself »

The following properties apply to the ::first-letter pseudo- element:

font properties
color properties
background properties
margin properties
padding properties
border properties
text-decoration
vertical-align (only if "float" is "none")
text-transform
line-height
float
clear

Pseudo-elements and CSS Classes

Pseudo-elements can be combined with CSS classes:

CSS:

p.article::first-letter {color:#ff0000;}

HTML:

<p class="article">A paragraph in an article</p>

The example above will display the first letter of all paragraphs with class="article", in red.

Multiple Pseudo-elements

Several pseudo-elements can also be combined.

In the following example, the first letter of a paragraph will be red, in an xx-large font size. The rest of the first line will be blue, and in small-caps. The rest of the paragraph will be the default font size and color:

Example

p::first-letter {
    color: #ff0000;
    font-size: xx-large;
}

p::first-line {
    color: #0000ff;
    font-variant: small-caps;
}

Try it yourself »

CSS - The ::before Pseudo-element

The ::before pseudo-element can be used to insert some content before the content of an element.
The following example inserts an image before each <h1> element:

Example

h1::before {
content: url(smiley.gif);
}

Try it yourself »

CSS - The ::after Pseudo-element

The ::after pseudo-element can be used to insert some content after the content of an element.
The following example inserts an image after each <h1> element:

Example

h1::after {
content: url(smiley.gif);
}

Try it yourself »

All CSS Pseudo Classes/Elements

Selector	Example	Example description
:link	a:link	Selects all unvisited links
:visited	a:visited	Selects all visited links
:active	a:active	Selects the active link
:hover	a:hover	Selects links on mouse over
:focus	input:focus	Selects the input element which has focus
::first-letter	p::first-letter	Selects the first letter of every <p> element
::first-line	p::first-line	Selects the first line of every <p> element
:first-child	p:first-child	Selects every <p> elements that is the first child of its parent
::before	p::before	Insert content before every <p> element
::after	p::after	Insert content after every <p> element
:lang(language)	p:lang(it)	Selects every <p> element with a lang attribute value starting with "it"

oke pertama gw berterima kasih untuk w3school karena nyediain materi yang berguna banget untuk belajar web oke disini gw mau jelasin soal pseudo element before after . jadi singkat aja gini untuk pseudo elemetn after itu berguna untuk nyisipin apa aja yang lu mau cuman dengan lu kasih tanda after pada saat pendeklarasian di CSS contohnya bisa diliat diatas , jadi intinya sebelum id atau class nya yang mau lu pake element yang udah lu tentuin itu bakalan keluar , praktis banet bukan ? .

Categories:

Latest Stories