教程集 www.jiaochengji.com
教程集 >  CSS教程  >  经典实例  >  正文 CSS教程 16、CSS的伪元素Pseudo Elements [翻译

CSS教程 16、CSS的伪元素Pseudo Elements [翻译

发布时间:2023-05-10   编辑:jiaochengji.com
教程集为您提供CSS教程 16、CSS的伪元素Pseudo Elements [翻译等资源,欢迎您收藏本站,我们将为您提供最新的CSS教程 16、CSS的伪元素Pseudo Elements [翻译资源

  
  伪元素吸附在选择上和pseudo classes伪类很像,像这样selector:pseudoelement{property: value;}。有四种方式。
First letters and First lines 首字母和首行
  first-letter伪元素作用到元素的第一个字母,first-line作用到元素的顶行。你可以,例如为段落创建一个drop caps和首行加粗。

 代码如下
p:first-letter {
    font-size: 3em;
    float: left;
}
p:first-line {
    font-weight: bold;
}

Before and after 前后
  before和after用来联系content属性不使用HTML确定一个元素的内容位置。
  content属性值可以是:open-quote,close-quote,no-open-quote,no-close-quote,在引号标记里关闭任何字符串或使用url(imagename)图片。

 代码如下
blockquote:before {
    content: open-quote;
}
blockquote:after {
    content: close-quote;
}
li:before {
    content: "POW: "
}
p:before {
    content: url(images/jam.jpg)
}

  听起来不错吧,可惜大部分用户不能体会到before或after的效果,因为IE不支持。
  

您可能感兴趣的文章:
CSS教程 16、CSS的伪元素Pseudo Elements [翻译
CSS高级教程 伪元素
解密jQuery内核 Sizzle引擎筛选器 – 位置伪类(一)
CSS教程 10、CSS的Pseudo Classes 伪类 
CSS中级教程 CSS伪类
CSS初级教程 边界和补白
CSS3创建缝合虚线效果的特效代码
css 伪类的使用方法详解
在IE中使用first-child
CSS教程 5、Margin和Padding [翻译Htmldog]

[关闭]
~ ~