앵커를 숨기지 않고 앵커 텍스트를 숨기려면 어떻게합니까

앵커를 숨기지 않고 앵커 텍스트를 숨기려면 어떻게합니까

---

다음 마크 업이 있다고 말합니다.

<li><a href="somehwere">Link text</a></li>

a 태그에 배경 이미지가있는 경우 CSS 만 사용하여 링크 텍스트를 숨기려면 어떻게해야합니까? font-size : 0은 ie7 작은 얼룩 표시와는 별도로 a 태그에서 잘 작동하는 것 같습니다.

감사

• 지금까지 도움을 주셔서 감사합니다. iv used line-height : 0; 및 font-size : 0; 및 텍스트 들여 쓰기 : -999px; 하지만 여전히 사파리에 약간의 얼룩이 나타납니다. 아이디어가 있습니까?

---

시험

 a{
    line-height: 0; 
    font-size: 0;
    color: transparent; 
 }

여기 color: transparent;에서는 여전히 1px의 텍스트를 표시하는 Webkit 브라우저의 문제를 다룹니다.

---

텍스트를 범위로 감싸고 visibility:hidden;가시성을 숨김으로 설정 하면 요소가 숨겨 지지만 페이지에서 동일한 공간을 차지합니다 (반대로 표시 : 페이지에서도 제거되지 않음).

---

a { text-indent:-9999px; }

내 경험에서 잘 작동하는 경향이 있습니다.

---

미니 팁 :

다음 시나리오가 있습니다.

<a href="/page/">My link text
:after
</a>

font-size : 0으로 텍스트를 숨겼으므로 FontAwesome 아이콘을 사용할 수 있습니다. 이것은 Chrome 36, Firefox 31 및 IE9 +에서 작동했습니다.

색상은 권장하지 않습니다. 텍스트 스타일이 존재하고 선택할 수 있기 때문에 투명합니다. line-height : 0px를 사용하면 : after를 사용할 수 없습니다. 내 요소가 인라인 블록이기 때문일 수 있습니다.

가시성 : 숨김 : : after를 사용할 수 없습니다.

텍스트 들여 쓰기 : -9999px; : : after 요소도 이동했습니다.

---

text-indent :-9999px 

완벽하게 작동합니다.

---

또 다른 옵션은 부트 스트랩 "sr-only"클래스를 기반으로 숨기는 것입니다. "sr-only"클래스를 사용하여 범위에서 텍스트를 래핑하면 텍스트가 표시되지 않지만 화면 판독기는 계속 액세스 할 수 있습니다. 그래서 당신은 :

<li><a href="somehwere"><span class="sr-only">Link text</span></a></li>

부트 스트랩을 사용하지 않는 경우에도 위의 내용을 그대로 유지하고 "sr 전용"클래스를 정의하기 위해 아래 CSS를 추가하십시오.

.sr-only {position: absolute;  width: 1px;  height: 1px;  padding: 0;  margin: -1px;  overflow: hidden;  clip: rect(0 0 0 0);  border: 0; }

---

나는 Loktar의 베스트 답변을 따랐고 매우 잘 작동했습니다. 내가 가진 유일한 문제는 Chrome이었습니다 (현재 버전은 27.0.1453.94m). 내가 가진 문제는 Chrome이 링크의 텍스트가 보이지 않는다는 것을 인식하고 링크를 약간 더 낮게 설정한다는 것입니다 (margin-top과 같은 것이지만 변경할 수는 없습니다 ). 이것은 텍스트를 보이지 않게 만드는 모든 방법에서 발생합니다.-line-height : 0; -글꼴 크기 : 0; -텍스트 들여 쓰기 : -9999px;

다음과 같이 링크의 수직 정렬을 조정하여이 문제를 해결할 수있었습니다.

vertical-align: 25px;

도움이 되었기를 바랍니다.

---

font-size: 0;텍스트가 포함 된 요소 에 추가 하기 만하면 됩니다. 이것은 잘 작동합니다.

---

font-size : 0 을 설정하여이 문제를 해결할 수있었습니다 .

---

어때 display: none;

그것은 아무것도 숨 깁니다.

참고 URL : https://stackoverflow.com/questions/5300714/how-do-i-hide-anchor-text-without-hiding-the-anchor