CSS — Pseudo Elements
Hi everyone,
Welcome to chapter-4 of a series of articles where I will tell you about all selectors in CSS.
I will tell you what are pseudo-elements in this section.
5) Pseudo elements
The :: pseudo represent entities that are not included in HTML.
::after
Creates a pseudo-element that is the last child of the selected element.
— Output
::before
Creates a pseudo-element that is the first child of the selected element.
— Output
::cue
Matches WebVTT cues within a selected element. This can be used to style captions and other cues in media with VTT tracks.
— WebVTT (Web Video Text Tracks Format)
WebVTT is a format for displaying timed text tracks (such as subtitles or captions) using the <track> element. The primary purpose of WebVTT files is to add text overlays to a <video>.
— Example WebVTT file
WEBVTT00:01.000 --> 00:05.000
- Example subtitle-100:06.000 --> 00:10.000
- Example subtitle-200:11.000 --> 00:15.000
- Example subtitle-3
— <track>
The <track> HTML element is used as a child of the media elements, <audio> and <video>. It lets you specify timed text tracks, for example to automatically handle subtitles.
::first-letter
Applies styles to the first letter of the first line of a block-level element.
— Output
::first-line
Applies styles to the first line of a block-level element.
— Output
::file-selector-button
Represents the button of an <input> of type="file".
— Output
::marker
Selects the marker box of a list item, which contains a bullet or number.
— Output
::placeholder
Represents the placeholder text in an <input> or <textarea> element.
— Output
::selection
Applies styles to the part of a document that has been highlighted by the user (such as clicking and dragging the mouse across text).
— Output
For all the examples in this section, visit.
You have come at the end of my article where I tell all the selectors in CSS. I hope that will be useful.
Resource
