CSS Pseudo-Elements

CSS Pseudo-Elements
Nikhil
Published on 2021-07-08 15:55:58

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


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: "").

div::after {
content: 'after';
color: red;
border: 1px solid red;
}
div {
color: black;
border: 1px solid black;
padding: 1px;
}
div::before {
content: 'before';
color: green;
border: 1px solid green;
}

OUTPUT:

output

 

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:

ul {
list-style-type: none;
}

Then you add the custom styling. In this example, we will create gradient boxes for bullets.

li:before {
content: "";
display: inline-block;
margin-right: 10px;
height: 10px;
width: 10px;
background: linear-gradient(red, blue);
}

HTML

<ul>
<li>Test I</li>
<li>Test II</li>
</ul>

Result

position css

 

ATutorialHub Related Guide

Comments (8)

Leave a Comment

Your email address will not be published. Required fields are marked*

User Comments

html tutorial comments

panduranga gupta

2021-07-05 07:03:13

good website for learning and help me a lot

html tutorial comments

raju

2021-09-25 14:58:47

The awsome website i am looking like for a long time, good work atutorialhub team keep doing

html tutorial comments

Shivani

2021-09-01 15:03:56

Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience

html tutorial comments

Harshitha

2021-09-10 15:05:45

It is very helpful to students and easy to learn the concepts

html tutorial comments

Sowmya

2021-09-14 15:06:41

Great job Tutorials are easy to understand Please make use of it

html tutorial comments

Zain Khan

2021-09-18 15:07:23

Great content and customized courses.

html tutorial comments

Rudrakshi Bhatt

2021-09-09 15:08:10

Well structured coursed and explained really well!

html tutorial comments

Pavana Somashekar

2021-09-11 15:09:08

Good platform for beginners and learn a lot on this website