Question

修改

这似乎是徒劳的尝试，因为如果在路上有伪元素似乎没有办法让第一个字母大写，并且不幸的是，伪元素不能被移动或移除为以下尝试的答案是希望的。无论如何，非常感谢你的帮助。

我附上了一个代码示例，只是为了让事情变得简单。

我想知道我是否正确地做了这个或者这是徒劳的尝试。希望上帝JavaScript不需要像这样简单的东西。

非常感谢您的任何见解！

label span:before {
  display: inline-block;
    content: " ";
  width: 10px; height: 10px;
    margin-right: 10px;
  border: 1px solid #333;
}

label {
  text-transform: lowercase;
}

label::first-letter {
  text-transform: uppercase;
}

<label>
  <span>
    TESTING
  </span>
</label>

Answer 1

你必须使第一个字母为大写，其余部分为小写。您还需要进行标签显示：inline-block;

jsfiddle：http://jsfiddle.net/afg3eegs/1/

label {
    display: inline-block;
    text-transform: lowercase;
}

label::first-letter {
    text-transform: uppercase;
}

<label>
    <span>
        TESTING
    </span>
</label>

希望这有帮助。

Answer 2

在这种特殊情况下，为了使<span>元素的第一个字母为大写，您需要将::before伪元素移动到<label>并使用{{1而::first-letter上的伪元素代替：

＆＃13;

<span>

＆＃13;

label:before {
  display: inline-block;
  content: " ";
  width: 10px; height: 10px;
  margin-right: 10px;
  border: 1px solid #333;
}

label, label span {
  text-transform: lowercase;
  display: inline-block;
}

label span::first-letter {
  text-transform: uppercase;
}

＆＃13;

请注意，::first-letter伪元素不适用于未替换的内联级元素。

Answer 3

试试这个，它应该适合你。

label {
  text-transform: capitalize;
}

Answer 4

如果文本“TESTING”已经是大写字母，据我所知，你无法使用css将其大写。你应该尝试使用javascript来做到这一点。或者您可以尝试使用display：inline-block属性，如上所述。

制作标签大写的第一个字母

4 个答案: