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

我想用< 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

解决方法

您可以使用：after而不是：before并将其浮动到左侧：

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

<span>my first word</span>