Как сделать первую букву заглавной с помощью css

Я хочу сделать мое первое письмо в <span> в столице. Но когда я использую :before на span capitalize не работает.

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
6
css css3

4 ответов

можно использовать :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>
4

это проблема из-за 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>
2
span { display:inline-block; color:#66a400; }

span: перед { content:" -"; заполнение: 0 2px; } span { text-transform: capitalize;}

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

попробуйте следующее: 

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