伪元素存在但不可见

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>