Question

我想在首都的<span>写下我的第一封信。但是当我在:before中使用span时，大写不起作用。

span { display:inline-block; color:#66a400; }
span:first-letter { text-transform:capitalize; }
span:before { content:"-"; padding:0 2px; }

<span>my first word</span>

我需要像下面那样放

- My first word

Answer 1

您可以使用:after代替:before并将其浮动到左侧：

＆＃13;

span {
  display: inline-block;
  color: #66a400;
}
span:first-letter {
  text-transform: capitalize;
}
span:after {
  content: "-";
  padding: 0 2px;
  float: left;
}

＆＃13;

<span>my first word</span>

＆＃13;

Answer 2

由于span:before选择器导致问题，请参见下文。

来自https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter

元素的第一个字母不一定非常容易识别：

...

最后，:: before伪元素和content属性的组合可能会在元素的开头注入一些文本。   在这种情况下，:: first-letter将匹配此字母的第一个字母   生成的内容。

如果您想在首字母大写的内容之前使用“ - ”，您可以执行以下操作，更改您的结构和css

CSS

span { display:inline-block; color:#66a400; }
span#before::before { content:"- "; padding:0 2px; }
span#content { text-transform:capitalize; }

HTML

<span id="before"></span><span id="content">my first word</span>

Answer 3

span { display:inline-block; color:#66a400; }

span：before {content：“ - ”;填充：0 2px; } span {text-transform：capitalize; }

<p><span>my</span> first word</p>

Answer 4

尝试以下方法：

span::first-letter { 
    text-transform: uppercase;
}

如何使用CSS制作首字母大写字母

4 个答案: