--- title: 100 underline/overlay animations | The ultimate CSS... description: The All Sides The Thick The Sliding The Below requires us to know the width of the element so it's more suitable for monospace fonts. The below doesn't work on... canonical: https://daily.dev/posts/100-underline-overlay-animations-the-ultimate-css-collection-y9cfouc5v twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: 100 underline/overlay animations | The ultimate CSS collection | daily.dev og:description: The All Sides The Thick The Sliding The Below requires us to know the width of the element so it's more suitable for monospace fonts. The below doesn't work on... og:url: https://daily.dev/posts/100-underline-overlay-animations-the-ultimate-css-collection-y9cfouc5v og:image: https://api.daily.dev/og/posts/y9CFOUC5v.png og:image:alt: 100 underline/overlay animations | The ultimate CSS collection og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # 100 underline/overlay animations | The ultimate CSS collection **[Community Picks](https://daily.dev/sources/community)** · [@afif](https://daily.dev/afif) · 2 min read · 465 upvotes · 19 comments ## Summary The All Sides The Thick The Sliding The Below requires us to know the width of the element so it's more suitable for monospace fonts. The below doesn't work on Firefox due to a known bug The 3D Warning. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@themaulik** · 3 upvotes > This is Mind Blowing, Love all of it. Definitely Gonna try this. Great work ✌🙌 **@fuadpashayev** · 3 upvotes > Woow! Awesome animations, that will be great bookmark for me to use them. Appreciate it **@themanthan9** · 3 upvotes > It's so useful **@abser** · 1 upvotes > like it！ **@osantos** · 1 upvotes > this is awesome! thanks for share! ## Similar posts on daily.dev - [Don’t just attend KubeCon \+ CloudNativeCon, Merge Forward your experience\!](https://daily.dev/posts/don-t-just-attend-kubecon-cloudnativecon-merge-forward-your-experience--l0rpp73x8) · CNCF · 1 upvotes · 0 comments - [Announcing H2 2026 KCDs](https://daily.dev/posts/announcing-h2-2026-kcds-m96goajm1) · CNCF · 1 upvotes · 0 comments - [Two months of Open Community Groups](https://daily.dev/posts/two-months-of-open-community-groups-asf52zhbs) · CNCF · 0 upvotes · 0 comments --- Tags: [#css](https://daily.dev/tags/css) [View this post on daily.dev](https://daily.dev/posts/100-underline-overlay-animations-the-ultimate-css-collection-y9cfouc5v) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"100 underline/overlay animations | The ultimate CSS collection","url":"https://daily.dev/posts/100-underline-overlay-animations-the-ultimate-css-collection-y9cfouc5v","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/100-underline-overlay-animations-the-ultimate-css-collection-y9cfouc5v"},"datePublished":"2022-08-17T08:49:02.275Z","dateModified":"2023-12-07T12:02:45.284Z","description":"The All Sides The Thick The Sliding The Below requires us to know the width of the element so it's more suitable for monospace fonts. The below doesn't work on...","image":"https://res.cloudinary.com/practicaldev/image/fetch/s--7sYPiQsv--/c_imagga_scale,f_auto,fl_progressive,h_500,q_66,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vevb2z73mab3trcg1zs8.gif","thumbnailUrl":"https://res.cloudinary.com/practicaldev/image/fetch/s--7sYPiQsv--/c_imagga_scale,f_auto,fl_progressive,h_500,q_66,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vevb2z73mab3trcg1zs8.gif","isAccessibleForFree":true,"articleSection":"Community Picks","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Person","name":"Temani Afif","url":"https://daily.dev/afif","image":"https://avatars.githubusercontent.com/u/14073250?v=4","interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"EndorseAction"},"userInteractionCount":2740}},"commentCount":19,"discussionUrl":"https://daily.dev/posts/100-underline-overlay-animations-the-ultimate-css-collection-y9cfouc5v","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":465},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":19}],"keywords":"css","timeRequired":"PT2M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Community Picks","item":"https://daily.dev/sources/community"},{"@type":"ListItem","position":3,"name":"100 underline/overlay animations | The ultimate CSS collection"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/100-underline-overlay-animations-the-ultimate-css-collection-y9cfouc5v","comment":[{"@type":"Comment","text":"This is Mind Blowing, Love all of it. Definitely Gonna try this. Great work ✌🙌","datePublished":"2022-08-17T09:47:24.063Z","url":"https://daily.dev/posts/y9CFOUC5v#c-aSU0JJIy8","author":{"@type":"Person","name":"Maulik Goswami","url":"https://daily.dev/themaulik","image":"https://avatars.githubusercontent.com/u/72465849?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3}},{"@type":"Comment","text":"Woow! Awesome animations, that will be great bookmark for me to use them. Appreciate it","datePublished":"2022-08-18T03:31:03.641Z","url":"https://daily.dev/posts/y9CFOUC5v#c-YVCjIxAQc","author":{"@type":"Person","name":"Fuad Pashayev","url":"https://daily.dev/fuadpashayev","image":"https://avatars.githubusercontent.com/u/29862327?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3}},{"@type":"Comment","text":"It’s so useful","datePublished":"2022-08-17T09:57:27.632Z","url":"https://daily.dev/posts/y9CFOUC5v#c-6njeRVH56","author":{"@type":"Person","name":"Manthan Thummar","url":"https://daily.dev/themanthan9","image":"https://media.daily.dev/image/upload/v1681982976/avatars/avatar_Qb32zj1ln6ehBXiuuCA0S.jpg"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3}},{"@type":"Comment","text":"like it！","datePublished":"2022-08-18T01:19:39.560Z","url":"https://daily.dev/posts/y9CFOUC5v#c-Kw3xLR3hW","author":{"@type":"Person","name":"DingRui Yang","url":"https://daily.dev/abser","image":"https://avatars.githubusercontent.com/u/32089134?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"this is awesome! thanks for share!","datePublished":"2022-08-17T18:08:49.657Z","url":"https://daily.dev/posts/y9CFOUC5v#c-uJ88tbvLq","author":{"@type":"Person","name":"osantos","url":"https://daily.dev/osantos","image":"https://lh3.googleusercontent.com/a-/AOh14GiiMbQobFdprHkJG-VPXszuleShzupNrx_3sOrR_A=s100"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}}]} ```