“텍스트-장식”및“: 후”의사 요소 [중복

StackOverflow https://stackoverflow.com/questions/1180910

  •  19-09-2019
  •  | 
  •  

문제

이 질문은 이미 여기에 답이 있습니다.

모든 올바른 생각을 가진 사람들과 마찬가지로, 나는 링크를 클릭하고 너무 늦게 브라우저 스크립팅 PDF 또는 Microsoft Office 파일로 이어지는 것을 싫어합니다. 나는 그러한 파일로 이어지는 링크 옆에 작은 아이콘을 표시함으로써 사람들에게 인생을 좀 더 쉽게 만들 것이라고 생각했습니다. IE8이 마침내 :after 의사 요소, 나는 CSS 선언이 상당히 간단 할 것이라고 생각했다.

a.file_pdf:after {
    content:url('/images/pdf.png');
    text-decoration: none;
    padding-left: 5px;
}

IE8에서는 이것이 잘 작동합니다. 그러나 Firefox와 Chrome에서 text-decoration: none 무시되고 밑줄은 아이콘의 바닥을 가로 질러 매력적으로 늘어납니다. 추가를 사용하여 "속임수"없이이 문제를 해결하는 방법이 있습니까? <span> 꼬리표?

도움이 되었습니까?

해결책

나는 다른 방식으로 그것을 사용하고 있습니다 속성 선택기, 배경 이미지와 패딩 (AS Xandy도 제안했습니다):

a[href$=".pdf"] {
  padding-right: 21px; /* space for the icon */
  background: url(graphics/pdf.png) no-repeat right bottom;
}

이것은 IE7에서도 작동합니다.

다음은 완전한 예입니다

IE7에서 PDF 아이콘은 데이터 URI를 이해하지 못하므로 표시되지 않습니다.

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>PDF</title>
<style type="text/css">
a:link,
a:visited {
  color: #317408;
  background: #eee;
}
a[href$=".pdf"] {
  padding-right: 21px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHhSURBVDjLjZPLSxtRFIfVZRdWi0oFBf+BrhRx5dKVYKG4tLhRqlgXPmIVJQiC60JCCZYqFHQh7rrQlUK7aVUUfCBRG5RkJpNkkswrM5NEf73n6gxpHujAB/fOvefjnHM5VQCqCPa1MNoZnU/Qxqhx4woE7ZZlpXO53F0+n0c52Dl8Pt/nQkmhoJOCdUWBsvQJ2u4ODMOAwvapVAqSJHGJKIrw+/2uxAmuJgFdMDUVincSxvEBTNOEpmlIp9OIxWJckMlkoOs6AoHAg6RYYNs2kp4RqOvfuIACVFVFPB4vKYn3pFjAykDSOwVta52vqW6nlEQiwTMRBKGygIh9GEDCMwZH6EgoE+qHLMuVBdbfKwjv3yE6Ogjz/PQ/CZVDPSFRRYE4/RHy1y8wry8RGWGSqyC/nM1meX9IQpQV2JKIUH8vrEgYmeAFwuPDCHa9QehtD26HBhCZnYC8ucGzKSsIL8wgsjiH1PYPxL+vQvm5B/3sBMLyIm7GhhCe90BaWykV/Gp+VR9oqPVe9vfBTsruM1HtBKVPmFIUNusBrV3B4ev6bsbyXlPdkbr/u+StHUkxruBPY+0KY8f38oWX/byvNAdluHNLeOxDB+uyQQfPCWZ3NT69BYJWkjxjnB1o9Fv/ASQ5s+ABz8i2AAAAAElFTkSuQmCC);
  background-repeat: no-repeat;
  background-position: right bottom;
}
a:hover {
  color: #eee;
  outline: none;
  background-color: #317408;
  text-decoration: none;
}
</style>
</head>
<body>

<p>
   <a href="document.pdf">Here's the PDF</a>
</p>

</body>
</html>

다른 팁

배경 이미지를 사용하는 것은 어떻습니까? 

a.file_pdf {
    background: url('/images/pdf.png') no-repeat right;
    padding-right: 30px;
    ...
}

편집하다

내 FF 3.5에서 완벽하게 테스트하고 실행되며, 전통적인 이미지 교체 기술 만 사용하므로 대부분의 브라우저에는 아무런 문제가 없어야합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top