Pseudo-element Selectors

The pseudo-elements are used to inserting fictional element into the document structure for styling.

The syntax of pseudo-element

selector:pseudo-element { property: value;}

::first-line
Used this element to applies a styles to the first line of the specified element.

The only properties you can apply: color, font, background, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, and line-height.

Example
p::first-line {letter-spacing: 9px;}

::first-letter
Used this element to applies a style to the fist letter of the specified element.

The only properties you can apply: color, font, background, letter-spacing, word-spacing, text-decoration, text-transform, vertical-align, padding, margin, border, line-height, and float,.

Example
::first-line {font-size: 300px;
color: red;
}

Content with ::before and ::after

::before
Used this element to insert some content before an element.

Example
p::before {
content url(img.png);
margin-left: 6px;
}

::after
Used this element to insert some content after an element.

Example
p::after {
content: “Thanks”;
color: red;
}

Leave a Reply