伪元素存在但不可见

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中存在拼写错误。将date-text替换为data-text元素上的<h1>：

.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>