How to display Admin-only links with CSS

It is very convenient for staff/admins to sprinkle "admin-only" links around the application. Since you're always a staff/admin user, how do you distinguish staff-only links from normal links? How do you make sure you're not exposing "dead" admin-only links to customers?

I like to annotate my admin-only links with a little SVG icon to indicate that this link is for staff/admin only:

This is a normal <a> link with a class admin-only:

<a href="/admin/deals/1234" class="admin-only">Internal docs</a>

This is implemented with a tiny piece of CSS to use the magic ::after pseudo-element, and the content property.

a.admin-only {
  position: relative;
}
a.admin-only::after {
  position: absolute;
  top: -2px;
  right: -14px;
  content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M4 8V6a6 6 0 1 1 12 0v2h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-8c0-1.1.9-2 2-2h1zm5 6.73V17h2v-2.27a2 2 0 1 0-2 0zM7 6v2h6V6a3 3 0 0 0-6 0z"/></svg>');
  display: block;
  width: 12px;
  height: 12px;
  color: #444;
}

The content value could be plain text, such as (admin).

The top/right help to place the SVG icon to the right of the <a> text on the screen. Maybe you'll need different values for different sized icons or fonts.

I love that I can inject any SVG into the content property, and with the ::after pseudo property I can place these SVG icons after any text. Seems a perfect use case to indicate which links are admin-only.