pseudo-element and Description
- ::after - Insert content after the content of an element
- ::before - Insert content before the content of an element
- ::first-letter - Selects the first letter of each element
- ::first-line - Selects the first line of each element
- ::selection - Matches the portion of an element that is selected by a user
- ::backdrop - Used to create a backdrop that hides the underlying document for an element in the top layer's stack
- ::placeholder - Allows you to style the placeholder text of a form element (Experimental)
- ::marker - For applying list-style attributes on a given element (Experimental)
- ::spelling-error - Represents a text segment that the browser has flagged as incorrectly spelled (Experimental)
- ::grammar-error - Represents a text segment that the browser has flagged as grammatically incorrect (Experimental)
Pseudo-elements, just like pseudo-classes, are added to a CSS selector but instead of describing a special state, they allow you to scope and style certain parts of an HTML element.
For example, the::first-letter pseudo-element targets only the first letter of a block element specified by the selector.
Pseudo-elements are added to selectors but instead of describing a special state, they allow you to style certain parts of a document.
The content attribute is required for pseudo-elements to render; however, the attribute can have an empty value (e.g. content: "").
border: 1px solid red;
border: 1px solid black;
border: 1px solid green;
Pseudo-Elements in Lists
Pseudo-elements are often used to change the look of lists (mostly for unordered lists, ul).
The first step is to remove the default list bullets:
Then you add the custom styling. In this example, we will create gradient boxes for bullets.
background: linear-gradient(red, blue);
ATutorialHub Related Guide
panduranga gupta2021-07-05 07:03:13
good website for learning and help me a lot
The awsome website i am looking like for a long time, good work atutorialhub team keep doing
Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience
It is very helpful to students and easy to learn the concepts
Great job Tutorials are easy to understand Please make use of it
Zain Khan2021-09-18 15:07:23
Great content and customized courses.
Rudrakshi Bhatt2021-09-09 15:08:10
Well structured coursed and explained really well!
Pavana Somashekar2021-09-11 15:09:08
Good platform for beginners and learn a lot on this website