CSS伪元素

2021-01-09 18:29

阅读:948

YPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">

标签:pre   css伪元素   rap   内容   image   技术   transform   head   多个   

CSS伪元素

  • :first-line;

  • :first-letter

  • :before

  • :after


:first-line 伪元素

  • "first-line" 伪元素用于向文本的首行设置特殊样式。


浏览器会根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化:第一行文字设置样式为红色,第二行为默认样式

技术图片

注释:"first-line" 伪元素只能用于块级元素。

注释:下面的属性可应用于 "first-line" 伪元素:

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

:first-letter 伪元素

  • "first-letter" 伪元素用于向文本的首字母设置特殊样式:




第一个文字设置样式

技术图片

注释:"first-letter" 伪元素只能用于块级元素。

注释:下面的属性可应用于 "first-letter" 伪元素:

  • font
  • color
  • background
  • margin
  • padding
  • border
  • text-decoration
  • vertical-align (仅当 float 为 none 时)
  • text-transform
  • line-height
  • float
  • clear

:before 伪元素

  • ":before" 伪元素可以在元素的内容前面插入新内容




This is a heading

技术图片

:after 伪元素

  • ":after" 伪元素可以在元素的内容之后插入新内容。




This is a heading

技术图片

伪元素与 CSS 类

  • 伪元素可以与 CSS 类配合使用:




This is a paragraph in an article。

技术图片

多重伪元素

  • 可以结合多个伪元素来使用。




This is a paragraph in an article。

技术图片
  • :first-letter与:before混合使用时:first-letter会失效




This is a paragraph in an article。

技术图片

CSS伪元素

标签:pre   css伪元素   rap   内容   image   技术   transform   head   多个   

原文地址:https://www.cnblogs.com/wen-qing/p/13515070.html

上一篇:css精灵图

下一篇:JS字符串 用法


评论


亲,登录后才可以留言!