Ẩn phần tử, nhưng hiển thị nội dung do CSS tạo

Question

Có cách nào để ẩn nội dung của phần tử hay không, nhưng có thể hiển thị nội dung :before của nó không? Nói rằng tôi có đoạn mã sau:

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

Tôi đã thử:

• sử dụng display: none và thiết display: inline trên :before, nhưng cả hai vẫn bị ẩn
• sử dụng width: 0; overflow: hidden;, nhưng sau đó thêm không gian dường như được thêm
• sử dụng màu sắc: trong suốt ;, nhưng sau đó, tất nhiên, nội dung của nhịp vẫn chiếm không gian
• sử dụng text-indent: -....px, nhưng
  (?)
  1. này không được tán thành bởi công cụ tìm kiếm và
  2. có vẻ như không làm việc cho các yếu tố span (?)

Bất kỳ ý tưởng khác như làm thế nào tôi có thể làm điều này?

Answer 1

sạch Giải pháp

Bạn có thể sử dụng visibility: hidden, nhưng với giải pháp này, nội dung ẩn vẫn sẽ mất không gian. Nếu điều này không quan trọng với bạn, đây là cách bạn sẽ làm điều đó:

span { 
    visibility: hidden; 
} 

span:before { 
    visibility: visible; 
} 

---

hackish Alternative Giải pháp

Một giải pháp khác sẽ được thiết lập font-size của nhịp để zero * đến một giá trị thực sự nhỏ. Lợi thế của phương pháp này: Nội dung ẩn sẽ không chiếm bất kỳ dung lượng nào. Nhược điểm: Bạn sẽ không thể sử dụng các đơn vị tương đối như em hoặc% cho kích thước phông chữ của nội dung :before.

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

Example on jsfiddle.

Cập nhật (ngày 04 Tháng Năm năm 2015): Với CSS3, bây giờ bạn có thể sử dụng các đơn vị rem (Root EM) để duy trì tương đối font-kích thước trong các yếu tố :before. (Browser support.)

---

* Phiên bản trước của bài đăng này đề xuất đặt kích thước phông chữ thành 0. Tuy nhiên, điều này không hoạt động như mong muốn trong một số trình duyệt, vì CSS không xác định hành vi nào được mong đợi là when the font-size is set to zero. Để có khả năng tương thích giữa các trình duyệt, hãy sử dụng kích thước phông chữ nhỏ như đã đề cập ở trên.

Answer 2

Tôi không nghĩ rằng có thể với css và html thuần túy. Nhìn vào ví dụ này http://jsbin.com/efeco4, bạn sẽ thấy rằng những gì nằm bên trong content thuộc tính của css, được bao bọc bởi phần tử. Vì vậy, bất kỳ thao tác nào của phần tử cũng sẽ ảnh hưởng đến css content.

Vì vậy, một ý tưởng thay thế có thể là sử dụng jquery, để trống nội dung html bên trong thẻ div với lớp hidetext mà không ảnh hưởng đến content của css. Một mẫu mã có thể là thế này:

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

Ví dụ: http://jsbin.com/efeco4/2

Answer 3

Để được hỗ trợ trình duyệt tốt hơn:

Bó văn bản cần được ẩn trong một yếu tố bổ sung span, và áp dụng các lớp học để khoảng đó để ẩn các văn bản mà bạn muốn được ẩn.

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

Lớp .visuallyhidden sử dụng ở trên là từ phiên bản hiện tại của HTML5 Boilerplate: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css

Những lợi thế của giải pháp này:

• Ngữ nghĩa HTML
• Hỗ trợ trình duyệt hoàn chỉnh
• Không có vấn đề với văn bản nhỏ như các giải pháp nhỏ khác font-size.
• Nội dung ẩn sẽ không chiếm nhiều không gian

Nhìn thấy nó trong hành động ở đây: http://jsfiddle.net/tinystride/A9SSb/