僞元素存在但不可見

Question

該模式在內容注入頁面之前已經存在，但它不可見，請問您可以提出什麼問題？

.aloha { 
 
    font-family: Medium; 
 
    font-size: 74px; 
 
    color: green; 
 
    position: relative; 
 
    display: inline-block; 
 
    margin: 0; 
 
    height: 85px; 
 

 
    
 
} 
 

 
.aloha:before { 
 
    width: 100%; 
 
    height: 85px; 
 
    color: red; 
 
    content: attr(data-text); 
 
    display: block; 
 
}

<h1 date-text='TEXT' class='aloha'>TEXT</h1>

Answer 1

。在你的HTML一個錯字。您<h1>元素替換date-text與data-text：

.aloha { 
 
    font-family: Medium; 
 
    font-size: 74px; 
 
    color: green; 
 
    position: relative; 
 
    display: inline-block; 
 
    margin: 0; 
 
    height: 85px; 
 
} 
 
.aloha:before { 
 
    width: 100%; 
 
    height: 85px; 
 
    color: red; 
 
    content: attr(data-text); 
 
    display: block; 
 
}

<h1 data-text='TEXT' class='aloha'>TEXT</h1>