CSS Tutorial

CSS Pseudo-element

Last modified on: October 21, 2024

<div class="flex-shrink-0 flex flex-col relative items-end">
<div>
<div class="pt-0">
<div class="gizmo-bot-avatar flex h-8 w-8 items-center justify-center overflow-hidden rounded-full">
<div class="relative p-1 rounded-sm flex items-center justify-center bg-token-main-surface-primary text-token-text-primary h-8 w-8">&nbsp;</div>
</div>
</div>
</div>
</div>
<div class="group/conversation-turn relative flex w-full min-w-0 flex-col agent-turn">
<div class="flex-col gap-1 md:gap-3">
<div class="flex max-w-full flex-col flex-grow">
<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="bfdfd1fb-889c-4fa0-815c-2e17cb41bf42" data-message-model-slug="gpt-4o-mini">
<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
<div class="markdown prose w-full break-words dark:prose-invert light">
<h3>CSS Pseudo-elements: Styling Specific Parts of Elements</h3>
<p><strong>Pseudo-elements</strong> are special CSS selectors that allow you to style specific parts of an element, rather than the whole element itself. They are used to apply styles to content that is generated dynamically or to target specific portions of an element's content.</p>
<h4>Syntax</h4>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>selector::pseudo-element {
    /* styles */
}
</code></pre>
</div>
</div>
</div>
</div>
<p>Note that pseudo-elements are defined with two colons (<code>::</code>) in CSS3 to differentiate them from pseudo-classes, which use a single colon (<code>:</code>). However, many older browsers support the single colon syntax for pseudo-elements.</p>
<hr />
<h3>Common CSS Pseudo-elements</h3>
<hr />
<h3>1. <strong><code>::before</code></strong> &ndash; Inserting Content Before an Element</h3>
<p>The <code>::before</code> pseudo-element allows you to insert content before the actual content of an element. This is often used to add decorative elements or additional information.</p>
<h4>Example: <code>::before</code></h4>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Before Pseudo-element&lt;/title&gt;
    &lt;style&gt;
        h2::before {
            content: "★ ";
            color: gold;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;h2&gt;This is a heading with a star before it&lt;/h2&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h5>Explanation:</h5>
<ul>
<li><code>h2::before</code>: Inserts a star (★) before the content of the <code>&lt;h2&gt;</code> element, styled in gold.</li>
</ul>
<hr />
<h3>2. <strong><code>::after</code></strong> &ndash; Inserting Content After an Element</h3>
<p>The <code>::after</code> pseudo-element works similarly to <code>::before</code>, but it inserts content after the element's content.</p>
<h4>Example: <code>::after</code></h4>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;After Pseudo-element&lt;/title&gt;
    &lt;style&gt;
        p::after {
            content: " - Thank you for reading!";
            font-style: italic;
            color: gray;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;p&gt;This is a paragraph.&lt;/p&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h5>Explanation:</h5>
<ul>
<li><code>p::after</code>: Appends the text " - Thank you for reading!" after the content of the <code>&lt;p&gt;</code> element, styled in italic and gray.</li>
</ul>
<hr />
<h3>3. <strong><code>::first-line</code></strong> &ndash; Styling the First Line of a Block</h3>
<p>The <code>::first-line</code> pseudo-element allows you to apply styles to the first line of a block of text. This can be useful for creating distinctive headings or introductions.</p>
<h4>Example: <code>::first-line</code></h4>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;First Line Pseudo-element&lt;/title&gt;
    &lt;style&gt;
        p::first-line {
            font-weight: bold;
            color: blue;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;p&gt;This is a paragraph where the first line is styled differently.&lt;/p&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h5>Explanation:</h5>
<ul>
<li><code>p::first-line</code>: Styles the first line of the paragraph to be bold and blue.</li>
</ul>
<hr />
<h3>4. <strong><code>::first-letter</code></strong> &ndash; Styling the First Letter of a Block</h3>
<p>The <code>::first-letter</code> pseudo-element allows you to style the first letter of a block-level element, which is often used in typography to create drop caps.</p>
<h4>Example: <code>::first-letter</code></h4>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;First Letter Pseudo-element&lt;/title&gt;
    &lt;style&gt;
        p::first-letter {
            font-size: 2em;
            font-weight: bold;
            float: left;
            margin-right: 5px;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;p&gt;This is a paragraph where the first letter is styled as a drop cap.&lt;/p&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h5>Explanation:</h5>
<ul>
<li><code>p::first-letter</code>: Styles the first letter of the paragraph to be larger and bold, creating a drop cap effect.</li>
</ul>
<hr />
<h3>5. <strong><code>::selection</code></strong> &ndash; Styling Selected Text</h3>
<p>The <code>::selection</code> pseudo-element allows you to change the styling of text that has been selected by the user.</p>
<h4>Example: <code>::selection</code></h4>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Selection Pseudo-element&lt;/title&gt;
    &lt;style&gt;
        ::selection {
            background: yellow;
            color: black;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;p&gt;Select this text to see the custom selection styles.&lt;/p&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h5>Explanation:</h5>
<ul>
<li><code>::selection</code>: Changes the background color of selected text to yellow and the text color to black.</li>
</ul>
<hr />
<h3>6. <strong><code>::marker</code></strong> &ndash; Styling List Item Markers</h3>
<p>The <code>::marker</code> pseudo-element is used to style the markers (bullets or numbers) of list items.</p>
<h4>Example: <code>::marker</code></h4>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Marker Pseudo-element&lt;/title&gt;
    &lt;style&gt;
        li::marker {
            color: red;
            font-size: 1.5em;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;ul&gt;
        &lt;li&gt;List item 1&lt;/li&gt;
        &lt;li&gt;List item 2&lt;/li&gt;
        &lt;li&gt;List item 3&lt;/li&gt;
    &lt;/ul&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h5>Explanation:</h5>
<ul>
<li><code>li::marker</code>: Styles the list item markers to be red and larger in size.</li>
</ul>
<hr />
<h3>Conclusion</h3>
<p>CSS pseudo-elements provide a powerful way to apply styles to specific parts of an element's content, allowing for creative and flexible designs. By using pseudo-elements like <code>::before</code>, <code>::after</code>, <code>::first-line</code>, <code>::first-letter</code>, and <code>::selection</code>, you can enhance the user experience and create visually appealing web pages.</p>
<hr />
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More