调整字号

CSS属性之content

content 是 CSS 里面一个不太常用的属性,之前对它的了解不是很多,今天正好去 MDN 上查了一下,在此分享分享。

content 需要跟 ::before::after 伪元素搭配使用,用来向元素之前或之后插入内容。被插入的内容属于匿名的替换元素(replaced elements)。

说到伪元素顺便聊下关于冒号的疑问,以前书上都是用单冒号来表示的(:before),在 CSS3 中新引入了双冒号,目的是为了跟伪类相区分。浏览器也都兼容旧的写法,所以在 CSS3 以前的伪元素(:first-line, :first-letter, :before, :after)用单冒号或双冒号都可以,但 ::selection 是 CSS3 中引入的,必须用双冒号。

content 属性如果用在普通的元素上,值会自动转化为 normal

content 属性主要有下面几个值:

  • none——不会产生任何内容。
  • normal——对于 ::before::after 伪元素,normal 自动转化为 none
  • 字符串——插入该字符串。
  • url()——可以插入一个外部资源,例如图像。
  • attr(X)——插入该 HTML 元素的属性 X 的值。如果 X 属性不存在,返回一个空字符串。
  • open-quoteclose-quote——插入一个左引号或右引号。
  • no-open-quoteno-close-quote——不插入任何内容,但会增加(或减少)一层引号嵌套。

还有两个不常用的属性值,一个 inherit,还有一种是计数器,具体用法可以参考一下原文

除了 normalnone,其它的属性值都可以组合使用,例如:

a:before { content: url(http://www.mozilla.org/favicon.ico) " MOZILLA: "; }
a:after { content: " (" attr(id) ")"; }

要在 IE 中使用该属性,需要的最低版本是 IE 8。

还没有评论,沙发空缺中……
上一篇
«
下一篇
»
flight