:first-line

优质

小牛编辑

127浏览

2023-12-01

描述 (Description)

:first-line伪元素用于向文本的第一行添加特殊效果。

以下属性适用于此伪元素 -

字体属性
颜色属性
背景属性
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

例子 (Example)

下面是演示如何使用的示例:first-line元素为文档中的第一行元素添加特殊效果。

<html>
   <head>
      <style type = "text/css">
         p:first-line { text-decoration: underline; }
         p.noline:first-line { text-decoration: none; }
      </style>
   </head>
   <body>
      <p class = "noline"> 
         This line would not have any underline because this belongs 
         to nline class.
      </p>
      <p>
         The first line of this paragraph will be underlined as defined in the 
         CSS rule above. Rest of the lines in this paragraph will remain normal. 
         This example shows how to use :first-line pseduo element to give effect 
         to the first line of any HTML element.
      </p>
   </body>
</html>

这将产生以下黑色链接 -