Web Tutorials

Mastering CSS Text Animation with the :has() Selector — Modern Web Design Tips

Morax
Last update :



 Looking to add interactive and eye-catching animations to your text using only CSS? In this tutorial, we’ll explore how to create stunning CSS text animations using the powerful :has() selector — one of the most exciting additions to CSS that brings parent selection capabilities into pure CSS workflows.

Whether you’re a beginner or an experienced web developer, this guide will walk you through how to leverage :has() to trigger animations, transitions, and dynamic styles based on child elements or interaction states — all without writing a single line of JavaScript!

Why Use :has() for Text Animations?

The :has() pseudo-class lets you select a parent element based on its child’s state or content. This enables dynamic styling and animation possibilities that previously required JavaScript.

For example, you can animate text on hover, trigger style changes based on child elements, or create fluid user experiences — all using pure CSS.

What You’ll Learn:

✅ How to structure HTML for responsive text animations
✅ How to use :has() to detect hover or focus states
✅ How to animate text color, position, or other effects
✅ Tips for cross-browser compatibility and fallbacks

Live Demo Video:

Watch the full tutorial on YouTube to see the animation in action and follow along step-by-step.

👉 https://youtu.be/XWG6M6KkRV8?si=_Rq30ybFC4uYkBj8

HTML Code:



<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Text Animation</title>
   <link rel="stylesheet" href="style.css">
</head>
<body>
   <div class="text">Text Animation</div>
   <script>
      let text = document.querySelector(".text");
      let string = text.textContent;
      let arr = string.split("");

      text.innerHTML = ("");
      arr.forEach((char)=>{
         let spanTag = `<span class="split-char">${char}</span>`;
         text.insertAdjacentHTML("beforeend", spanTag);
      });
   </script>
</body>
</html>

CSS Code:



/* Google Fonts(Poppins) */
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
*{
   font-family: "Poppins", sans-serif;
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}
body{
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #222;
}
.text{
   font-size: clamp(2rem, calc(2rem + 3.5rem), 8rem);
   color: #999;
   user-select: none;
}
.split-char{
   font-weight: 200;
   transition: 0.4s;
}
.split-char:hover{
   font-weight: 900;
   color: #4070f4;
}
.split-char:has(+ .split-char:hover){
   font-weight: 700;
   color: #acc0f6;
}
.split-char:has(+ .split-char + .split-char:hover){
   font-weight: 400;
   color: #dee5f9;
}
.split-char:hover + .split-char{
   font-weight: 700;
   color: #acc0f6;
}
.split-char:hover + .split-char + .split-char{
   font-weight: 400;
   color: #dee5f9;
}

Browser Support & Tips:

⚠️ Note: The :has() selector is currently supported in most modern browsers (Chrome, Edge, Safari). For Firefox, consider using JavaScript as a fallback if necessary.

Conclusion:

The :has() selector opens up new creative possibilities in CSS. With it, you can build dynamic and animated interfaces — like this CSS text animation — with less code and no JavaScript. It’s a perfect example of how modern CSS is evolving to empower developers.

If you found this tutorial helpful, don’t forget to subscribe for more weekly coding content, and check out the rest of our UI design tutorials!

Edit This Article
Tags

You may like these posts

Comments