<!-- mobian-agent-page publisher="dailydev" canonical="https://daily.dev/posts/the-css-hack-you-need-to-know--sbyq2um5f" -->

---
title: The CSS Hack You Need To Know! | daily.dev
description: The Attr() selector allows our CSS style sheet code to communicate with our HTML. The selector allows us to read in attribute values specific to the targeted...
canonical: https://daily.dev/posts/the-css-hack-you-need-to-know--sbyq2um5f
twitter:card: summary_large_image
twitter:site: @dailydotdev
og:type: website
og:site_name: daily.dev
og:title: The CSS Hack You Need To Know! | daily.dev
og:description: The Attr() selector allows our CSS style sheet code to communicate with our HTML. The selector allows us to read in attribute values specific to the targeted...
og:url: https://daily.dev/posts/the-css-hack-you-need-to-know--sbyq2um5f
og:image: https://api.daily.dev/og/posts/sBYQ2UM5f.png
og:image:alt: The CSS Hack You Need To Know!
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.

# The CSS Hack You Need To Know!

**[Dev Genius](https://daily.dev/sources/devgenius)** · 2 min read · 267 upvotes · 11 comments

## Summary

The Attr() selector allows our CSS style sheet code to communicate with our HTML. The selector allows us to read in attribute values specific to the targeted HTML tag or element. A common practice implementation for this type of feature would be to use an additional span within an element. The span value is updated as required.

## Full article

daily.dev links to this article rather than hosting it. Read it at the original source: <https://blog.devgenius.io/the-css-hack-you-need-to-know-7a3c2f7a8ce1?source=rss----4e2c1156667e---4>

## Community discussion

Top comments from developers on daily.dev.

**@codercarl1** · 5 upvotes

> Would recommend that anyone using an atttribute to keep track of data should be using a data attribute.
>
> There is no promise that CSS, HTML, or some assistive technology won't start to use the same random name that you chose on a whim.
>
> try something like data-item-count as these are future proofed.

**@devduck\_max** · 5 upvotes

> I just ❤️ this selector! As a TypeScript react developer I just have to adjust the `HTMLAttributes` in a `.d.ts` file so I can use custom properties :)

**@mrgrigri** · 5 upvotes

> ♥️ This really is a great hack that all front-end web developers should know. However, I would keep the inner HTML but hide it visually from a sighted user, but keep it for screen readers. Screen readers do not read `::before` or `::after` pseudo classes. So someone with a disability may not know how many notification they have.

**@lin\_du** · 0 upvotes

> I really hate CSS Hack. I prefer everything is standard. Hacking means chaos and disorder and the inability to form knowledge

**@tugrulyildirim** · 0 upvotes

> I will definitly use it ! Thank you !

## 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
- [CNCF Unveils Schedule for KubeCon \+ CloudNativeCon Europe 2026](https://daily.dev/posts/cncf-unveils-schedule-for-kubecon-cloudnativecon-europe-2026-ikhcoa5cb) · CNCF · 2 upvotes · 0 comments
- [CNCF Debuts KubeCon \+ CloudNativeCon Japan 2026 Schedule](https://daily.dev/posts/cncf-debuts-kubecon-cloudnativecon-japan-2026-schedule-xp5pyudub) · CNCF · 1 upvotes · 0 comments

---

Tags: [#webdev](https://daily.dev/tags/webdev), [#javascript](https://daily.dev/tags/javascript), [#css](https://daily.dev/tags/css), [#html](https://daily.dev/tags/html)

[View this post on daily.dev](https://daily.dev/posts/the-css-hack-you-need-to-know--sbyq2um5f)

```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":"The CSS Hack You Need To Know!","url":"https://daily.dev/posts/the-css-hack-you-need-to-know--sbyq2um5f","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/the-css-hack-you-need-to-know--sbyq2um5f"},"datePublished":"2022-08-18T07:52:37.516Z","dateModified":"2022-08-18T07:52:37.430Z","description":"The Attr() selector allows our CSS style sheet code to communicate with our HTML. The selector allows us to read in attribute values specific to the targeted...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/69d0313e27e053a4d24b1df85b5b5600","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/69d0313e27e053a4d24b1df85b5b5600","isAccessibleForFree":true,"articleSection":"Dev Genius","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":"Organization","name":"Dev Genius","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/a79144d7517043e7803ed562e45a99df","url":"https://daily.dev/sources/devgenius"},"commentCount":11,"discussionUrl":"https://daily.dev/posts/the-css-hack-you-need-to-know--sbyq2um5f","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":267},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":11}],"keywords":"webdev,javascript,css,html","timeRequired":"PT2M"}
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Dev Genius","item":"https://daily.dev/sources/devgenius"},{"@type":"ListItem","position":3,"name":"The CSS Hack You Need To Know!"}]}
{"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/the-css-hack-you-need-to-know--sbyq2um5f","comment":[{"@type":"Comment","text":"Would recommend that anyone using an atttribute to keep track of data should be using a data attribute.\nThere is no promise that CSS, HTML, or some assistive technology won’t start to use the same random name that you chose on a whim.\ntry something like data-item-count as these are future proofed.","datePublished":"2022-08-19T04:16:34.410Z","url":"https://daily.dev/posts/sBYQ2UM5f#c-UtN4I9ihL","author":{"@type":"Person","name":"Carl Davidson","url":"https://daily.dev/codercarl1","image":"https://avatars.githubusercontent.com/u/54295128?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":5}},{"@type":"Comment","text":"I just ❤️ this selector! As a TypeScript react developer I just have to adjust the HTMLAttributes in a .d.ts file so I can use custom properties :)","datePublished":"2022-08-18T12:07:02.198Z","url":"https://daily.dev/posts/sBYQ2UM5f#c-1o4Bw9eLL","author":{"@type":"Person","name":"Max Wüst","url":"https://daily.dev/devduck_max","image":"https://media.daily.dev/image/upload/f_auto/v1654200346/avatars/EitPbT9Z5by6vU72KFMFE"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":5}},{"@type":"Comment","text":"♥️ This really is a great hack that all front-end web developers should know. However, I would keep the inner HTML but hide it visually from a sighted user, but keep it for screen readers. Screen readers do not read ::before or ::after pseudo classes. So someone with a disability may not know how many notification they have.","datePublished":"2022-08-18T15:13:06.238Z","dateModified":"2022-08-18T15:14:41.620Z","url":"https://daily.dev/posts/sBYQ2UM5f#c-PxtRRBFtW","author":{"@type":"Person","name":"Michael Richins","url":"https://daily.dev/mrgrigri","image":"https://avatars2.githubusercontent.com/u/4528551?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":5}},{"@type":"Comment","text":"I really hate CSS Hack. I prefer everything is standard. Hacking means chaos and disorder and the inability to form knowledge","datePublished":"2022-08-22T02:28:32.548Z","url":"https://daily.dev/posts/sBYQ2UM5f#c-eFTbuJhaS","author":{"@type":"Person","name":"official_dulin","url":"https://daily.dev/lin_du","image":"https://avatars2.githubusercontent.com/u/17866683?v=4"}},{"@type":"Comment","text":"I will definitly use it ! Thank you !","datePublished":"2022-08-19T06:08:25.313Z","url":"https://daily.dev/posts/sBYQ2UM5f#c-OeaUytB1P","author":{"@type":"Person","name":"tugrulyildirim.com","url":"https://daily.dev/tugrulyildirim","image":"https://avatars1.githubusercontent.com/u/58388980?v=4"}}]}
```