<p>Have you ever tried to put a gradient on a border and found it just wouldn’t work with normal CSS? That’s exactly where the magic of CSS pseudo-elements <strong>::before</strong> and <strong>::after</strong> steps in. These pseudo-elements allow you to add creative styling effects that standard CSS properties simply can’t achieve on their own.</p><p>My name’s Rob, and here at PreCodeCamp, I’m excited to show you how to harness the power of these pseudo-elements to create visually stunning effects like gradients on borders, animated underlines, and interactive hover effects — all in just a few minutes!</p><div data-youtube-video=""><iframe width="640" height="480" allowfullscreen="true" autoplay="false" disablekbcontrols="false" enableiframeapi="false" endtime="0" ivloadpolicy="0" loop="false" modestbranding="false" origin="" playlist="" progressbarcolor="white" src="https://www.youtube.com/embed/zGnyAXn8epM?color=white" start="0"></iframe></div><h2 id="76db0bf2-ca60-41e6-b004-c51e3d2d8d36" data-toc-id="76db0bf2-ca60-41e6-b004-c51e3d2d8d36"><strong>What Are Pseudo-elements ::before and ::after?</strong></h2><p>Pseudo-elements like <code>::before</code> and <code>::after</code> let you insert content before or after an element’s actual content without modifying the HTML itself. They act as child elements that you can style with CSS, enabling you to add decorative features such as backgrounds, shapes, or animations.</p><p>For example, if you want to add a gradient border or a custom underline that changes on hover, these pseudo-elements give you the flexibility to do so without cluttering your HTML markup.</p><h2 id="e47b3cc5-4f1d-445b-ae53-25c1535ccdfc" data-toc-id="e47b3cc5-4f1d-445b-ae53-25c1535ccdfc"><strong>Setting Up Your HTML and CSS</strong></h2><p>To start, you’ll typically have a simple HTML structure, like an <code>&lt;h1&gt;</code> tag with some text inside. Your CSS file will be linked to the HTML so you can style the elements effectively.</p><p>For instance:</p><pre><code>&lt;h1&gt;PreCodeCamp&lt;/h1&gt;</code></pre><p>Then in your CSS, you target this element and apply the pseudo-elements using the double colon syntax:</p><pre><code>h1::before {
  content: "Hello";
  background-color: red;
}</code></pre><p>This adds the word “Hello” before the original <code>h1</code> content, with a red background for visibility.</p><img src="https://miro.medium.com/v2/0*XJaCg7qX7ZTRO5u2" alt="Adding content and background color with ::before pseudo-element" loading="lazy" width="700" class="gx bh gy c" draggable="true" style="width: 700px; height: auto; cursor: pointer;"><h2 id="9adbf284-bc84-4bb2-85fa-d9b81a68c7fa" data-toc-id="9adbf284-bc84-4bb2-85fa-d9b81a68c7fa"><strong>Using ::before and ::after for Styling, Not Content</strong></h2><p>While you can add text content with these pseudo-elements, their real power lies in styling. If you remove the text content but want to keep the styling — like a colored block or underline — you need to set up positioning properly.</p><ul><li style="color: rgb(36, 36, 36);"><p>Set the original element’s position to <code>relative</code> so the pseudo-element can be positioned absolutely in relation to it.</p></li><li style="color: rgb(36, 36, 36);"><p>Give the pseudo-element a height and width to make it visible.</p></li><li style="color: rgb(36, 36, 36);"><p>Set the pseudo-element’s position to <code>absolute</code> so you can place it precisely where you want.</p></li></ul><p>For example, creating a small red block under the heading might look like this:</p><pre><code>h1 {
  position: relative;
  width: max-content;
}

h1::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: red;
}</code></pre><img src="https://miro.medium.com/v2/0*JKW1t9bKl0mG89lo" alt="Red underline block created with ::after pseudo-element" loading="lazy" width="700" class="gx bh gy c" draggable="true" style="width: 700px; height: auto; cursor: pointer;"><h2 id="407c1a92-26cc-45c5-8b09-b2e218f66343" data-toc-id="407c1a92-26cc-45c5-8b09-b2e218f66343"><strong>Creating Animated Hover Effects</strong></h2><p>You can also combine pseudo-elements with CSS pseudo-classes like <code>:hover</code> to add interactivity. For instance, you can make the underline disappear when hovering over the heading.</p><p>Here’s how you might do that:</p><pre><code>h1::after {
  transition: width 100ms ease-in-out;
}

h1:hover::after {
  width: 0;
}</code></pre><p>Hovering over the heading causes the underline to shrink smoothly, adding a subtle but stylish effect.</p><img src="https://miro.medium.com/v2/0*x_7gvZ_dE7mzjF55" alt="Hover effect shrinking underline with transition" loading="lazy" width="700" class="gx bh gy c" draggable="true" style="width: 700px; height: auto; cursor: pointer;"><h2 id="32f3525b-467b-44a9-8f1d-17944dcbcb42" data-toc-id="32f3525b-467b-44a9-8f1d-17944dcbcb42"><strong>Adding Gradients with Pseudo-elements</strong></h2><p>One of the coolest tricks is using these pseudo-elements to add gradients where normal CSS borders can’t. Since borders don’t support gradients directly, you can create a gradient bar with <code>::before</code> or <code>::after</code> and position it like a border.</p><p>This opens up a whole new world of design possibilities, allowing you to make your website stand out with unique visual effects that engage users.</p><img src="https://miro.medium.com/v2/0*HQhuFlTlLvRGISO3" alt="Gradient effect created with pseudo-elements" loading="lazy" width="700" class="gx bh gy c" draggable="true" style="width: 700px; height: auto; cursor: pointer;"><h2 id="9773070e-326e-4840-b109-f372fe3206d0" data-toc-id="9773070e-326e-4840-b109-f372fe3206d0"><strong>Why Use ::before and ::after?</strong></h2><ul><li style="color: rgb(36, 36, 36);"><p><strong>Creativity:</strong> Add decorative elements without extra HTML.</p></li><li style="color: rgb(36, 36, 36);"><p><strong>Flexibility:</strong> Easily position and style elements for effects like underlines, borders, or overlays.</p></li><li style="color: rgb(36, 36, 36);"><p><strong>Interactivity:</strong> Combine with hover and other pseudo-classes for dynamic user experiences.</p></li><li style="color: rgb(36, 36, 36);"><p><strong>Performance:</strong> Keeps your HTML clean and semantic while enhancing visual appeal.</p></li></ul><h2 id="cd0835f8-e709-4d19-9100-6003a3979cb0" data-toc-id="cd0835f8-e709-4d19-9100-6003a3979cb0"><strong>Practical Tips for Using Pseudo-elements</strong></h2><ul><li style="color: rgb(36, 36, 36);"><p>Always set the parent element’s <code>position</code> to <code>relative</code> when using absolute positioning on pseudo-elements.</p></li><li style="color: rgb(36, 36, 36);"><p>Use <code>content: "";</code> for styling-only pseudo-elements without adding text.</p></li><li style="color: rgb(36, 36, 36);"><p>Experiment with sizes, colors, and positioning to get the exact effect you want.</p></li><li style="color: rgb(36, 36, 36);"><p>Combine with transitions for smooth animations.</p></li></ul><h2 id="29965c11-011a-4143-9d31-184d4d428079" data-toc-id="29965c11-011a-4143-9d31-184d4d428079"><strong>Conclusion</strong></h2><p>Pseudo-elements <code>::before</code> and <code>::after</code> are powerful tools in CSS that let you accomplish styling feats that are otherwise impossible with regular properties. From creating gradient borders and custom underlines to adding interactive hover effects, mastering these pseudo-elements can elevate your web design skills and make your projects truly pop.</p><p>Ready to dive deeper into CSS and web development? Check out more tutorials and lessons on our <a target="_blank" rel="noopener ugc nofollow" class="ag kb" href="https://www.precodecamp.com/blog"><u>PreCodeCamp blog</u></a> to continue your learning journey.</p><h2 id="51fb1f88-0f18-4de5-9000-f0a656c0e746" data-toc-id="51fb1f88-0f18-4de5-9000-f0a656c0e746"><strong>Frequently Asked Questions (FAQ)</strong></h2><h2 id="44b3b9d2-d8bd-4605-b195-a993d1ca14e4" data-toc-id="44b3b9d2-d8bd-4605-b195-a993d1ca14e4"><strong>What is the difference between ::before and ::after?</strong></h2><p><code>::before</code> inserts content immediately before the element’s content, while <code>::after</code> inserts content immediately after. Both are used for styling and can be positioned independently.</p><h2 id="d4dcee13-bbed-4e4d-9ca6-2abc2fef05d8" data-toc-id="d4dcee13-bbed-4e4d-9ca6-2abc2fef05d8"><strong>Can I add text content using these pseudo-elements?</strong></h2><p>Yes, by setting the <code>content</code> property to a string, you can add text. However, they are mostly used for decorative purposes rather than adding meaningful content.</p><h2 id="60d6d9ca-864c-4331-b4bc-c63d3ecee487" data-toc-id="60d6d9ca-864c-4331-b4bc-c63d3ecee487"><strong>Why do I need to set the parent element’s position to relative?</strong></h2><p>Because pseudo-elements with <code>position: absolute;</code> are positioned relative to the nearest positioned ancestor. Setting the parent to <code>relative</code> ensures your pseudo-element positions correctly in relation to it.</p><h2 id="8463ba23-17ca-4244-be31-1145f5aee4d9" data-toc-id="8463ba23-17ca-4244-be31-1145f5aee4d9"><strong>Are pseudo-elements supported in all browsers?</strong></h2><p>Yes, <code>::before</code> and <code>::after</code> are widely supported across modern browsers, making them safe to use for most web projects.</p><h2 id="42aeeed3-e0e9-4fe1-b8ad-4db663b24b8a" data-toc-id="42aeeed3-e0e9-4fe1-b8ad-4db663b24b8a"><strong>Can I use pseudo-elements for animations?</strong></h2><p>Absolutely! You can animate properties like width, height, opacity, and colors on pseudo-elements to create engaging effects like hover animations or loading indicators.</p><h2 id="d5b5ceb2-a246-4b3e-a0b4-e626f38f9e36" data-toc-id="d5b5ceb2-a246-4b3e-a0b4-e626f38f9e36"><strong>Explore More</strong></h2><p>Want to expand your CSS knowledge? Visit our <a target="_blank" rel="noopener ugc nofollow" class="ag kb" href="https://www.precodecamp.com/blog/css-tutorial-creating-a-search-input-field-with-button-effects"><u>CSS tutorial on creating search input fields with button effects</u></a> or learn about the fundamentals of <a target="_blank" rel="noopener ugc nofollow" class="ag kb" href="https://www.precodecamp.com/blog/html-vs-css-vs-javascript-a-beginner-s-guide-to-web-development-s-power-trio"><u>HTML, CSS, and JavaScript</u></a> — the essential trio for web development.</p><p>Keep coding and stay creative!</p>

Discover how to use CSS pseudo-elements ::before and ::after to create gradient borders, animated underlines, and interactive hover effects in just minutes.

Master CSS ::before and ::after Pseudo-elements for Stunning Styles

What Are Pseudo-elements ::before and ::after?

Using ::before and ::after for Styling, Not Content

What is the difference between ::before and ::after?

Can I add text content using these pseudo-elements?

Why do I need to set the parent element’s position to relative?

Are pseudo-elements supported in all browsers?

Can I use pseudo-elements for animations?

PreCodeCamp has tutorials and lessons covering a variety of topics, from programming to Bootcamp News

PreCodeCamp | Blog Articles

You need to know certain things as a Coding Boot Camp Learner. We will share news and tutorials.

Master CSS ::before and ::after Pseudo-elements for Stunning Styles

Master CSS ::before and ::after Pseudo-elements for Stunning Styles

Related Posts

Add Web Animations in 5 Minutes with Animate.css

Exploring Alternatives to Flex Wrap in CSS

Revolutionizing Web Design with New CSS Features

CSS Tutorial: Creating a Search Input Field with Button Effects

Fastest and Easiest Way to Copy and Inspect CSS