Question

<label for="billing_city" class="">City <abbr class="required" title="required">*</abbr></label>

我有这个标签。我用这个css改变了它的文字：

label[for="billing_city"]:before{content:'Please select city: '}

但我需要在原始内容中隐藏"City"字符串。是否有任何css技巧可以轻松做到这一点？我的问题是没有任何课程。

Answer 1

你可以使用这样的font-size一些技巧：

＆＃13;

label[for="billing_city"] {
  font-size:0; /*Hide the whole content*/
}

label[for="billing_city"]:before {
  content: 'Please select city: ';
  font-size:initial; /* Make only this visible */
}
label[for="billing_city"] * {
  font-size:initial; /* Make also visible any other inner content */
}

＆＃13;

<label for="billing_city" class="">City <abbr class="required" title="required">*</abbr></label>

＆＃13;

Answer 2

您可以使用text-indent和overflow：

label[for="billing_city"]{
    text-indent:-200px;
    overflow:hidden;
    position:relative;
    display:block;
}

label[for="billing_city"]:before {
    content: 'Please select city: ';
    position: absolute;
    left: 200px;
    z-index: 99;
}

这是一个丑陋的修复，但它确实有效。 JS Fiddle

任何CSS修复都是＆＃34;错误的东西＆＃34;在这里做 - 如果你可以直接在HTML中更改标签，那就更好了，更有意义。

Css删除默认标签文本并保持当前

2 个答案: