css - 如何用 css 替换标签文本(没有 id)

Question

我有一个简单的代码:

<div class="delem"><label class="required" for="last_name">Full Name :</label><input id="fullname" type="text" name="fullname" value="" class="fullsize" required=""></div>



<div class="delem"><label class="required" for="identity_number">Personal ID Number:</label><input id="identity_number" type="text" name="_identityNumber" value="" class="fullsize" required=""></div>

我想用 css 更改“个人身份证号码”。

Answer 1

将标签的字体大小设置为 0，以隐藏文本。将标签的新文本放在::before 或::after 伪元素中，并将其字体大小设置为标签原来的大小。 (这里假设为 1rem。)

label[for="identity_number"] {
  font-size: 0
}

label[for="identity_number"]::after {
  font-size: 1rem;
  content: 'Some other number: ';
}

<div class="delem"><label class="required" for="identity_number">Personal ID Number:</label><input id="identity_number" type="text" name="_identityNumber" value="" class="fullsize" required=""></div>