1. 程式人生 > 實用技巧 >偽元素控制首行文字或字母的樣式

偽元素控制首行文字或字母的樣式

一、定義和用法

定義

:first-line 偽元素向文字的首行新增特殊樣式。

這個偽元素用於設定元素中的第一行文字的樣式,而不論該行出現多少單詞。

:first-line 只能與塊級元素關聯。可以應用到首字母的屬性是有限的。

註釋:下列屬性應用於 :first-line 偽元素:

  • font 屬性
  • color 屬性
  • background 屬性
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

語法

p:first-line{
    font-size: 26px;
    font-weight: 900;
    color: red;
}

二、效果預覽

基礎效果:

這是一段測試文字這是一段測試文字這是一段測試文字這是一段測試文字這是一段測試文字這是一段測試文字這是一段測試文字這是一段測試文字這是一段測試文字這是一段測試文字這是一段測試文字這是一段測試文字這是一段測試文字這是一段測試文字這是一段測試文字這是一段測試文字這是一段測試文字這是一段測試文字這是一段測試文字這是一段測試文字這是一段測試文字這是一段測試文字這是一段測試文字這是一段測試文字

welcome to beijing welcome to beijing welcome to beijing welcome to beijing welcome to beijing welcome to beijing welcome to beijing welcome to beijing welcome to beijing welcome to beijing welcome to beijing welcome to beijing welcome to beijing welcome to beijing welcome to beijing welcome to beijing welcome to beijing

新增樣式效果:

這是一段測試文字這是一段測試文字這是一段測試文字這是一段測試文字這是一段測試文字這是一段測試文字這是一段測試文字這是一段測試文字這是一段測試文字這是一段測試文字這是一段測試文字這是一段測試文字這是一段測試文字這是一段測試文字這是一段測試文字這是一段測試文字這是一段測試文字這是一段測試文字這是一段測試文字這是一段測試文字這是一段測試文字這是一段測試文字這是一段測試文字這是一段測試文字

welcome to beijing welcome to beijing welcome to beijing welcome to beijing welcome to beijing welcome to beijing welcome to beijing welcome to beijing welcome to beijing welcome to beijing welcome to beijing welcome to beijing welcome to beijing welcome to beijing welcome to beijing welcome to beijing welcome to beijing