I haven't found a nice way to do this on both desktop/mobile. What I want is for every heading to have an anchor link that can be copied, similar to a hyperlink. I see a lot of sites do this with a [unicode chain symbol] which is present on hover, but that's not an option on mobile. Alternate option is to have it next to every heading (ugly), turn every heading into a hyperlink without styling, or make them look like regular hyperlinks which I think is confusing.
/* keep the icon hidden by default */ :is(h1, h2, h3, h4, h5, h6) .icon { visibility: hidden; }
/* show the icon on focus and hover */ :is(h1, h2, h3, h4, h5, h6):focus .icon, :is(h1, h2, h3, h4, h5, h6):hover .icon { visibility: visible; }
/* show the icon on devices that don't have any accessory that can hover */ @media (pointer: coarse), (any-hover: none) { :is(h1, h2, h3, h4, h5, h6) .icon { visibility: visible; } }
The `pointer: coarse` media query checks if you are using a device with an input mechanism of limited accuracy (such as fingers on a touchscreen). The `any-hover: none` media query checks if none of the input mechanisms on your device support hover (such as a Surface tablet not attached with a keyboard).