Делаем первую букву в тексте заглавной

Как сделать первую букву в тексте заглавной средствами CSS?
Для этого есть CSS свойство text-transform

Пример использования:
определим стиль

p.first_leter {
    text-transform: capitalize;
}

применяем этот стиль

<div><p class='first_leter'>text</p></div>

Может Вас интересует вопрос как выделить другим стилем первый символ в тексте элемента, например, жирным и красным?
Легко! Для этого нам пригодится псевдоэлемент :first-letter

Сразу пример:

определим стиль

p.first_big:first-letter {
font-weight:bold;
    color:red;
}

   

присвоим его нужному нам элементу на HTML странице

<p class='first_leter'>sometext</p>

В результате первый символ выделен жирным шрифтом и красным цветом.

Tags: css выделить первый сисмол в тексте

2014-02-05