Sử dụng attr (data-icon) bất động sản để hiển thị unicode trước phần tử

Question

Hãy chứng minh một ví dụ với mã HTML đơn giản như thế này:

<div data-icon="\25B6">Title</div> 

Tôi muốn yếu tố này để có một biểu tượng tiền tố được thiết lập bởi nó thuộc tính dữ liệu (dữ liệu biểu tượng) vì vậy tôi đặt tập tin CSS như thế này:

div:before { 
    content: attr(data-icon); 
} 

đầu ra của tôi mong muốn ví dụ này sẽ trông như thế này:

▶Title 

Thay vì đầu ra mong muốn tất cả những gì có thể nhận được là thế này:

\25B6Title 

Vì vậy, câu hỏi của tôi là: những gì tôi làm sai/những gì tôi bị mất?

Ví dụ JSFiddle: http://jsfiddle.net/Lqgr9zv6/

Answer 1

Trình tự thoát CSS chỉ hoạt động trong chuỗi CSS. Khi bạn thực hiện chuỗi thoát CSS từ một thuộc tính HTML (tức là bên ngoài CSS), nó sẽ được đọc theo nghĩa đen, không được hiểu là một phần của chuỗi CSS.

Nếu bạn muốn mã hóa ký tự trong thuộc tính HTML, bạn cần mã hóa nó dưới dạng thực thể HTML. Điều này sẽ được xem bởi CSS là ký tự Unicode tương ứng. Do đây là một dãy thoát thập lục phân bạn có thể chuyển ngữ nó like so:

<div data-icon="&#x25B6;">Title</div> 

Hoặc bạn có thể chỉ use the Unicode character itself:

<div data-icon="▶">Title</div> 

Answer 2

bạn có thể USS css tam giác cho mũi tên. http://jsfiddle.net/Lqgr9zv6/3/

div{ 
position:relative; 
text-indent:12px; 
} 


div:before { 
content:''; 
position:absolute; 
left:0; 
top:0; 
bottom:0; 
margin:auto; 
width: 0; 
height: 0; 
border-style: solid; 
border-width: 5px 0 5px 10px; 
border-color: transparent transparent transparent #000; 
}