请选择 进入手机版 | 继续访问电脑版
CSS3选择器 ::before和::after使用方法教程
:before和:after伪元素的用法
:before和:after伪元素的用法十分简单;下面的代码样例中, :before 和 :after 将会在 blockquote 元素之前和之后插入新内容,它使用content属性,也就是在内容上进行操作。
下面的代码中一个引号标记将出现在blockquote元素的之前和之后。

CSS3选择器 ::before和::after使用方法教程

CSS3选择器 ::before和::after使用方法教程
  1. blockquote:before {        
  2. content: open-quote;
  3. }
  4. blockquote:after {        
  5. content: close-quote;
  6. }
复制代码


:before和:after伪元素的CSS样式
:before和:after虽然是伪元素,但它们所有用法和行为表现和真正的元素几乎完全一样;我们可以对它们进行任何的CSS样式设置,例如,改变它们的前景颜色,增加背景色/图,调整字体大小,调整对齐方式等等。

CSS3选择器 ::before和::after使用方法教程

CSS3选择器 ::before和::after使用方法教程

  1. blockquote:before {
  2.         content: open-quote;
  3.         font-size: 24pt;
  4.         text-align: center;
  5.         line-height: 42px;
  6.         color: #fff;
  7.         background: #ddd;
  8.         float: left;
  9.         position: relative;
  10.         top: 30px;

  11. }
  12. blockquote:after {
  13.         content: close-quote;
  14.         font-size: 24pt;
  15.         text-align: center;
  16.         line-height: 42px;
  17.         color: #fff;
  18.         background: #ddd;
  19.         float: right;
  20.         position: relative;
  21.         bottom: 40px;
  22. }
复制代码

:before和:after伪元素宽度和高度设置
:before和:after伪元素在页面中生成的元素在缺省情况下是“内联(inline)”元素,如果我们想指定它们的高度和宽度,需要首先定义它们为一个block元素,使用display: block;。

CSS3选择器 ::before和::after使用方法教程

CSS3选择器 ::before和::after使用方法教程

  1. blockquote:before {
  2.         content: open-quote;
  3.         font-size: 24pt;
  4.         text-align: center;
  5.         line-height: 42px;
  6.         color: #fff;
  7.         background: #ddd;
  8.         float: left;
  9.         position: relative;
  10.         top: 30px;
  11.         border-radius: 25px;

  12.         /** 定义成 block 元素 **/
  13.         display: block;
  14.         height: 25px;
  15.         width: 25px;
  16. }
  17. blockquote:after {
  18.         content: close-quote;
  19.         font-size: 24pt;
  20.         text-align: center;
  21.         line-height: 42px;
  22.         color: #fff;
  23.         background: #ddd;
  24.         float: right;
  25.         position: relative;
  26.         bottom: 40px;
  27.         border-radius: 25px;

  28.         /** 定义成 block 元素 **/
  29.         display: block;
  30.         height: 25px;
  31.         width: 25px;
  32. }
复制代码


给:before和:after伪元素添加背景图/背景色
我们不仅可以设置content的文字内容,而且可以给它添加图片和背景图片。尽管content 属性直接支持url()语法来插入一个图片,但在大多数情况下,我们更常用的是使用background属性来控制图片的显示。

CSS3选择器 ::before和::after使用方法教程

CSS3选择器 ::before和::after使用方法教程
  1. blockquote:before {
  2.         content: " ";
  3.         font-size: 24pt;
  4.         text-align: center;
  5.         line-height: 42px;
  6.         color: #fff;
  7.         float: left;
  8.         position: relative;
  9.         top: 30px;
  10.         border-radius: 25px;

  11.         background: url(images/quotationmark.png) -3px -3px #ddd;

  12.         display: block;
  13.         height: 25px;
  14.         width: 25px;
  15. }
  16. blockquote:after {
  17.         content: " ";
  18.         font-size: 24pt;
  19.         text-align: center;
  20.         line-height: 42px;
  21.         color: #fff;
  22.         float: right;
  23.         position: relative;
  24.         bottom: 40px;
  25.         border-radius: 25px;

  26.         background: url(images/quotationmark.png) -1px -32px #ddd;

  27.         display: block;
  28.         height: 25px;
  29.         width: 25px;
  30. }
复制代码



然而,你也看到了,在上面的代码片段中,我们仍然声明了content属性,并设置它的值为空字符串。这个content属性,在这里是必须的,如果没有它,这些伪元素将不能正常显示。
将:before和:after伪元素和伪类(pseudo-classes)混合使用
尽管伪元素和伪类是不同的东西,但我们可以将它们在同一个CSS规则里混合使用,例如,如果你想要这样的一个效果:当鼠标移动到blockquote元素上时,由伪元素生成的“引号”的颜色变深,下面的代码就可以达到这样的效果。

CSS3选择器 ::before和::after使用方法教程

CSS3选择器 ::before和::after使用方法教程
  1. blockquote:hover:after, blockquote:hover:before {
  2.         background-color: #555;
  3. }
复制代码

推荐给好友: [复制链接]
推荐文章
回复

使用道具 举报

相关文章

精彩评论1

自丢网真心不错,学习教程网。
回复

使用道具 举报

发布主题
  • 今日更新:7 昨日更新:15
  • 会员总数:365 模板总数:8667
打造全国最大建站模板下载平台
手机/微信

13145201488

周一至周日9:00-23:00

如有侵权请联系我们

515138@qq.com 在线QQ咨询

微信扫码关注我们