css - 伪元素存在但不可见

Question

模式在内容注入(inject)到页面之前，但它不可见，请问是什么问题？

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