---
title: "Managing Anchor Associations With Data Attributes and Advanced attr() – Frontend Masters Blog"
url: https://daily.dev/posts/managing-anchor-associations-with-data-attributes-and-advanced-attr-frontend-masters-blog-i37fqo42h
source_url: https://frontendmasters.com/blog/managing-anchor-associations-with-data-attributes-and-advanced-attr
type: article
source: "Frontend Masters"
published: 2026-05-27T15:16:39.952Z
updated: 2026-05-27T17:03:00.732Z
tags: ["css"]
reading_time: 6
upvotes: 3
comments: 0
language: 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.

# Managing Anchor Associations With Data Attributes and Advanced attr() – Frontend Masters Blog

**[Frontend Masters](https://daily.dev/sources/frontendmasters)** · 6 min read · 3 upvotes · 0 comments

## Summary

The HTML `anchor` attribute was removed from standardization, leaving CSS `anchor-name` and `position-anchor` as the only way to establish anchor relationships. A workaround using the advanced `attr()` CSS function with data attributes is presented: by storing dashed ident values in `data-boat` and `data-anchor` attributes, a single CSS rule can wire up multiple anchor associations via `position-anchor: attr(data-boat type(<custom-ident>))`. The same pattern applies to scroll animation timelines. The upcoming `ident()` CSS function (not yet browser-supported) could simplify this further by converting plain strings to dashed idents inline.

## Full article

daily.dev links to this article rather than hosting it. Read it at the original source: <https://frontendmasters.com/blog/managing-anchor-associations-with-data-attributes-and-advanced-attr>

## Similar posts on daily.dev

- [Anchor Popovers without distinct Anchor Names](https://daily.dev/posts/anchor-popovers-without-distinct-anchor-names-a739bvcxe) · RUBYLAND · 1 upvotes · 0 comments
- [The Basics of Anchor Positioning](https://daily.dev/posts/the-basics-of-anchor-positioning-8tvfbfq60) · Ahmad Shadeed · 3 upvotes · 0 comments

---

Tags: [#css](https://daily.dev/tags/css)

[View this post on daily.dev](https://daily.dev/posts/managing-anchor-associations-with-data-attributes-and-advanced-attr-frontend-masters-blog-i37fqo42h)