"first-letter не работает". Почему first-letter не работает. Рассмотрим несколько примеров с неработающей первой буквой css и решим задачку не работающей first-letter.
О неработающей first-letter свойстве.
Почему first-letter не работает
Если я смогу воссоздать не работающее свойство "first-letter" - то это означает простой ответ, что я знаю "почему не работает first-letter" - для иллюстрации примера вам понадобится:
Тег a(ссылка).
В данный тег добавим... какой-то класс, чтобы оперировать именно к нашему примеру!
Этому классу добавим свойства, которые сразу вы сомжете увидеть... это будет первая "ПРОПИСНАЯ" и добавим крассный цвет:
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" работать вам понадобится:
Всё, что я делал в первом пункте... чуть-чуть изменим и чуть-чуть добавим....
Изменим класс:
Добавим к данному классу что? Правильно! Свойство которое превратит нашу ссылку из 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
Далее - разместим приведенный код прямо здесь:
