Anchor-name
Learn anchor naming with anchor-name.
Anchor names with anchor-name
To make an element an anchor you use the anchor-name property. Its value is an anchor name starting with two hyphens: anchor-name: --menu-button;. The name works like a unique tag on the page.
The name looks like a custom property but it is different: it is not a variable, it is a label stuck on the element. Other elements use this name with position-anchor to bind to the anchor.
Anchor name syntax
An anchor name must start with two hyphens (--) followed by an identifier. --menu-button is valid; menu-button is not. Hyphens, letters, and digits are allowed; spaces are not.
One element can carry several anchor names: anchor-name: --menu-button --menu-toggle;. Each space-separated name is a separate label; different elements can bind with different names.
Exercise Make the button an anchor
Write a .menu-button selector. The block must contain anchor-name: --menu-button. This makes the button an anchor.
Show example solution
/* make the button an anchor */
.menu-button {
anchor-name: --menu-button;
}Test yourself
-
Which property declares an element as an anchor?
- anchor-name
- position-anchor
- anchor-position
- position-try
Show answer
anchor-name — Correct. anchor-name declares an element as an anchor and gives it a name.
-
Complete the anchor-name declaration
.menu-button { anchor-name: ____; }Show answer
.menu-button { anchor-name: --menu-button; } -
Match properties and names to their roles
- anchor-name
- Makes an element an anchor
- --menu-button
- Valid anchor name
- menu-button
- Invalid anchor name
- position-anchor
- Binds to an anchor