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.
Top comments (0)