CSS를 사용하여 관리자 전용 링크를 표시하는 방법

반응형

직원/관리자는 애플리케이션 주변에 "관리자 전용" 링크를 뿌리는 것이 매우 편리합니다. 항상 직원/관리자이므로 직원 전용 링크와 일반 링크를 어떻게 구별합니까? 고객에게 "사망한" 관리자 전용 링크가 노출되지 않도록 하려면 어떻게 해야 합니까?

관리자 전용 링크에 작은 SVG 아이콘으로 주석을 달아 이 링크가 직원/관리자 전용 링크임을 나타냅니다.

이것은 클래스 관리자 전용으로 된 일반적인 링크입니다.

 

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

이것은 Magic ::after pseudo-element와 컨텐츠 속성을 사용하기 위한 작은 CSS 조각으로 구현된다.

  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;
  }

내용 값은 (admin)과 같은 일반 텍스트일 수 있습니다.

화면의 텍스트 오른쪽에 SVG 아이콘을 배치하기 위한 상단/오른쪽 도움말입니다. 크기가 다른 아이콘이나 글꼴에 대해 다른 값이 필요할 수 있습니다.

 

컨텐츠 속성에 SVG를 삽입할 수 있다는 점이 너무 좋으며, ::after pseudo 속성을 사용하여 텍스트 뒤에 이러한 SVG 아이콘을 배치할 수 있습니다. 어떤 링크가 관리자 전용인지 나타내기에 완벽한 사용 사례로 보입니다.