Search within TutorialsPark

CSS Pseudo Elements


Apply CSS styles based to elements based position within the HTML Hierarchy(DOM)


CSS Pseudo Elements

1. With CSS pseudo-element selectors you can select and apply CSS styles to elements based on their positon within the HTML Hierarchy(i.e DOM).

2. Since the pseudo elements are not present in the HTML markup , hence the name Pseudo-Element.

3. Its meant to targets the specific parts of the Document like first-line or first-letter make them appear different from the rest of the document.

4. With new CSS3 specifcations,the syntax for pseudo elements is prefixed with double colon " :: " to distinguish them from pseudo-class.

CSS3 Pseudo-Elements

::first-letter - Selects the first letter of the text Contents.

::first-line - Selects the first line of the text Contents.

::before - To generate content immediately before an element.

::after - To generate content immediately after an element


CSS Pseudo Elements

CSS Pseudo Elements ::first-letter

1. The pseudo-element selector ::first-name selects the first-letter of the text Content.

2. Its used to distinguish or isolate the first letter of a text block, to create a "Drop Caps" effect.

Example: CSS Pseudo Element ::first-letter

Give it a TRY! » Note: The ::first-letter selects the first letter of all elements,if required make it more specific.


CSS Pseudo Element ::first-line

1. CSS Pseudo Element ::first-line selects the first line of of the specified text block.

Example: CSS Pseudo Selector ::checked

Give it a TRY! » Note:If the window size is changed then the browser will find what the first line is again.


CSS Pseudo Element ::before

1. CSS Pseudo Element ::before immediately before the element.

2. Usually the content property is used to define the generated content, but even CSS styles can be applied. Eg: for shadow effects

Example: CSS Pseudo Element ::before

Give it a TRY! » Note:The content generated using :before is not visible to screen readers and search engines.


CSS Pseudo Element ::after

1. CSS pseudo element ::after is used to generate content immediately after the text block or content.

Example:CSS Pseudo Element ::after

Give it a TRY! » Note:The content generated using ::after is not visisble to screen readers and search engines.


All CSS Attribute Selectors

Units Names Descriptions
E[attribute] Attribute Selects elements if it has the specified attribute
E[attribute="value"] Exact Value Selects elements if the Element has specified attribute equal to the exact value.
E[attribute~="value"] Spaced List Selects elements if the Element has specified attribute equal to exact value within space-separated list.
E[attribute*="value"] Contains Selects elements if the Element has specified value equal to exact value appearing anywhere.
E[attribute^="value"] Begins with Selects elements if the Element has specified attribute equal to the exact value only at the Beginning of the string.
E[attribute|="value"] Hyphenated List Selects elements if the Element has specified attribute equal to exact value within hyphen-separated list.
E[attribute$="value"] Ends with Selects elements if the Element has specified attribute equal to the exact value at the end of string.