CSS first line: Первая строка и ее оформление

Оформление первой строки текста при помощи CSS :first-line

Бывает так, что вы не хотите использовать теги HTML заголовка, но при этом конструкция текста предполагает выделение первой строки. Вот наглядный пример оформления первой строки текста при помощи CSS псевдоэлемента first line:

В Соединенных Штатах Америки
второй по прибыльности после нефтяной является информационная индустрия.

Теперь разберем HTML и CSS код нашего примера:

<title>Первая строка в css</title>

          <style type="text/css">

          p.f-l:first-line {color:#06c; font-weight:bold; line-height:210%}

          </style>
 </head>

          <body>

          <p class="f-l">В Соединенных Штатах Америки <br /> второй по прибыльности после нефтяной является информационная индустрия.</p>

Строку текста в примере мы сначала разбили HTML тегом <br />, сделав таким образом перенос. Затем присвоили параграфу класс class="f-l", который необходимым способом описали в CSS стилях, назначив для первой строки характерное оформление.

Как вы видите, ничего сложного, а в вашем арсенале еще один CSS прием.

Автор проекта - Вася Митин | Дата публикации: Январь 2013 | Обновление: Ноябрь 2018

Первая строка или CSS first line CSS справочник