CSS pseudo-elements creates a new virtual element that represents a part of the element which can be manipulated like regular elements with some limitations. Pseudo-elements are only visible to users, they are not available in the document element tree i.e. they are not real elements. Pseudo-elements are mainly used to style specific parts of an element to which the pseudo-element is attached. Double colon is prepended before the pseudo-element to distinguish it from pseudo-class, but for backward compatibility we can also use single colon. Commonly used CSS pseudo-elements are:
- ::after
- ::before
- ::first-letter
- ::first-line
- ::marker
- ::placeholder
- ::selection
- ::backdrop
/* Basic Syntax */
selector::pseudo-element{
property: value;
}
::after & ::before
::after / ::before creates a child element inside a element to which the pseudo class is attached. You must specify the content property of ::after / ::before to make the pseudo element to be visible, the content property can be an empty string. Both before and after pseudo-element has default display value of inline. In the “after” pseudo element the “content” created by the pseudo element is inserted after the main element, for "before" pseudo element the content is insert before the main element.
Check the below example, the black circle is created using before and after pseudo elements.
.para {
position: relative;
background: #aaa;
padding: 20px;
}
.para::before {
content: "";
width: 50px;
height: 50px;
border-radius: 50px;
background: #000;
position: absolute;
left: -50px;
top: -50px;
}
.para::after {
content: "";
width: 50px;
height: 50px;
border-radius: 50px;
background: #000;
position: absolute;
right: -50px;
bottom: -50px;
}
::first-letter
First-letter pseudo element can be used to style the first letter of the first line, without using any extra html tags. For the first-letter pseudo element to work as expected the element should be of type display: block;
, and the first letter should not be preceded by any other contents, for example images. Not all properties as supported by first-letter pseudo element, a limited set of font properties, margin property, padding property, border property and some background properties support first-letter pseudo element.
.para::first-letter{
color:#fff;
letter-spacing: 2px;
text-transform: uppercase;
font-size: 30px;
background: #000;
padding: 5px 10px;
margin-right: 5px;
}
::first-line
First line pseudo element is used to style the first line of a text in a block element. First-line pseudo element supports font, color, text and background properties only.
.para::first-line{
color:red;
letter-spacing: 2px;
text-transform: uppercase;
font-size: 20px;
}
::marker
Marker pseudo element helps to style the marker box of any element whose display property is set to list-item
, it also helps to style the arrow of the summary elements. Marker pseudo element mainly supports color property and font properties.
<ul class="list">
<li class="item">One</li>
<li class="item">Two</li>
<li class="item">Three</li>
<li class="item">Four</li>
</ul>
.item::marker {
color: lime;
font-size: 25px;
}
::placeholder
Placeholder pseudo element helps to style the placeholder attributes of html input tags.
.text1::placeholder {
font-size: 18px;
padding-left: 20px;
text-transform: uppercase;
letter-spacing: 2px;
color: #f00;
text-decoration: underline;
}
::selection
Selection pseudo element helps to style text selected / highlighted by the user. Few properties like text shadow, background color and color properties are supported.
.para::selection{
color:#fff;
background: #f00;
}
::backdrop
Helps to style the backdrop area of video / dialog html
elements when viewed in full screen mode.
.video::backdrop {
background: yellow;
color: black;
}
Top comments (4)
They are good when you need some style, which requires another HTML element, but the good practice is not use HTML elements just for styling.
No way to manipulate pseudo elements with JS, but they are some hacks, of course:
stackoverflow.com/a/8046436/5849229
Thanks for the information
Thanks for sharing this information
You are welcome