요소를 숨기지 만 CSS 생성 콘텐츠 표시

요소를 숨기지 만 CSS 생성 콘텐츠 표시

---

요소의 내용을 숨기지 만 내용을 계속 :before표시 할 수있는 방법이 있습니까? 다음 코드가 있다고 가정합니다.

HTML :

<span class="addbefore hidetext">You are here</span>

CSS :

.addbefore:before {
    content: "Show this";
}
.hidetext {
    // What do I do here to hide the content without hiding the :before content?
}

난 노력 했어:

• 사용 display: none및 설정 display: inline에 :before, 그러나 모두는 여전히 숨겨져 있습니다
• width: 0; overflow: hidden;를 사용 하지만 추가 공간이 추가 된 것 같습니다 (?)
• using color : transparent;하지만 물론 범위의 내용은 여전히 ​​공간을 차지합니다.
• 사용 text-indent: -....px하지만
  1. 이것은 검색 엔진에 의해 눈살을 찌푸리고
  2. 스팬 요소 (?)에 대해 작동하지 않는 것 같습니다.

내가 어떻게 할 수 있는지에 대한 다른 아이디어가 있습니까?

---

깨끗한 솔루션

을 사용할 수 visibility: hidden있지만이 솔루션을 사용하면 숨겨진 콘텐츠가 여전히 공간을 차지합니다 . 이것이 당신에게 중요하지 않다면 다음과 같이 할 것입니다.

span {
    visibility: hidden;
}

span:before {
    visibility: visible;
}

---

Hackish 대체 솔루션

또 다른 해결책은 font-size범위 를 설정하는 것 입니다.0으로* 정말 작은 값으로. 이 방법의 장점 : 숨겨진 콘텐츠는 공간을 차지하지 않습니다. 단점 : :before콘텐츠 의 글꼴 크기에 em 또는 %와 같은 상대 단위를 사용할 수 없습니다 .

span:before {
    content: "Lorem ";
    font-size: 16px;
    font-size: 1rem; /* Maintain relative font-size in browsers that support it */
    letter-spacing: normal;
    color: #000;
}

span {
    font-size: 1px;
    letter-spacing: -1px;
    color: transparent;
}

jsfiddle의 예.

업데이트 (2015 년 5 월 4 일) : CSS3를 사용하면 이제 rem(Root EM) 단위를 사용하여 :before요소의 상대적 글꼴 크기를 유지할 수 있습니다. (브라우저 지원.)

---

*이 게시물의 이전 버전에서는 글꼴 크기를 0으로 설정하는 것이 좋습니다. 그러나 CSS가 font-size가 0으로 설정되었을 때 예상되는 동작을 정의하지 않기 때문에 일부 브라우저에서는 원하는대로 작동하지 않습니다 . 브라우저 간 호환성을 위해 위에서 언급 한 것처럼 작은 글꼴 크기를 사용하십시오.

---

더 나은 브라우저 지원을 위해 :

추가 span요소 내에 숨겨야하는 텍스트를 래핑하고 해당 범위에 클래스를 적용하여 숨길 텍스트를 숨 깁니다.

HTML :

<span class="addbefore">
  <span class="visuallyhidden>This text will not show.</span>
</span>

CSS :

.addbefore:before {
  content: "Show this";
}

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

.visuallyhidden위에 사용 된 클래스의 현재 버전 인 HTML5 상용구 : https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css

이 솔루션의 장점 :

• 시맨틱 HTML
• 완벽한 브라우저 지원
• No problems with tiny text like other small font-size solutions.
• The hidden content won't take up space

See it in action here: http://jsfiddle.net/tinystride/A9SSb/

---

Building on @anroesti's excellent hack, here's a solution if you need to apply in unknown contexts in terms of font size and color, i.e. you are not sure if resetting to color:black;font-size:1rem; will not mess things up:

<span abbrev-content="Intl.">International</span>

@media only screen and (max-width: 700px) {  /* very narrow viewports */
    span[abbrev-content] { font-size: 0.001em; visibility: hidden; }
    span[abbrev-content]::before { 
        content: attr(abbrev-content); 
        font-size: 1000em; 
        visibility: visible; 
    }
}

If your span content is a paragraph and not just a word, you may also need the negative letter-spacing.

---

I took a similar approach as suggested here with visibility, but that still has a content box.

My solution is to simply use font-size to hide the target text.

span {
    font-size: 0;
}

span:before {
    font-size: 16px;
}

---

I don't think it's possible with pure css and html. Looking at this example http://jsbin.com/efeco4 you will see that what is inside content property of css, is wrapped by the element. So any manipulation of the element will affect the css content also.

So an alternative thought could be to use jquery, to empty the html content inside tag div with class hidetext without affect the content of css. A sample code could be this:

$('.hidetext').empty();

Example: http://jsbin.com/efeco4/2

참고URL : https://stackoverflow.com/questions/4912765/hide-element-but-show-css-generated-content