First-letter не работает

"first-letter не работает". Почему first-letter не работает. Рассмотрим несколько примеров с неработающей первой буквой css и решим задачку не работающей first-letter.

О неработающей first-letter свойстве.

1. Почему first-letter не работает
2. First-letter работает

Почему first-letter не работает

Если я смогу воссоздать не работающее свойство "first-letter" - то это означает простой ответ, что я знаю "почему не работает first-letter" - для иллюстрации примера вам понадобится:

Тег a(ссылка).

В данный тег добавим... какой-то класс, чтобы оперировать именно к нашему примеру!

first_letter_not_work

Этому классу добавим свойства, которые сразу вы сомжете увидеть... это будет первая "ПРОПИСНАЯ" и добавим крассный цвет:

a.first_letter_not_work:first-letter {
text-transform: uppercase !important;
color: red;
}

В него поместим заранее известный текст, где первая буква будет маленькой(строчной):

этот текст маленькой первой буквой.

Соберем весь код:

Код не работающем свойстве first-letter

Css:

<style>

a.first_letter_not_work:first-letter {

text-transform: uppercase;

color: red;

}

</style>

Html:

<a class=first_letter_not_work href=#>этот текст маленькой первой буквой.</a>

Пример не работающего свойства first-letter

Ну и далее разместим приведенный код "first-letter" прямо здесь:

этот текст маленькой первой буквой.
Как видим.. first-letter не работает!

Давайте заставим работать first-letter!




First-letter работает

Для того, чтобы заставить "First-letter" работать вам понадобится:

Всё, что я делал в первом пункте... чуть-чуть изменим и чуть-чуть добавим....

Изменим класс:

first_letter_work

Добавим к данному классу что? Правильно! Свойство которое превратит нашу ссылку из display:inline в display: inline-block;

Соберём весь код:

Код работающего свойстве first-letter

Css:

<style>

a.first_letter_work:first-letter {

text-transform: uppercase !important;

color: red;

}

a.first_letter_work {

display: inline-block;

}

</style>

Html:

<a class=first_letter_work href=#>этот текст маленькой первой буквой.</a>

Пример работающего свойства first-letter

Далее - разместим приведенный код прямо здесь:

этот текст маленькой первой буквой.
Как видим:
first-letter - прекрасно работает...