伪元素::before和::after

来源：互联网发布：美工设计经理岗位职责编辑：程序博客网时间：2024/04/30 00:40

2.10.3　伪元素::before和::after

对于“::before”和“::after”来说，大家并不多见，但“:before”和“:after”，或许不会陌生，因为清除浮动就使用这两个伪类。

“::before”和“::after”不是指存在于标记中的内容，而是可以插入额外内容的位置。尽管生成的内容不会成为DOM的一部分，但它同样可以设置样式。

要为伪元素生成内容，还需要配合content属性。例如，假设在页面上所有外部链接之后的括号中附加它们所指向的URL，无须将URL硬编码到标记中，可以结合使用一个属性选择器和“::after”伪元素。

a[herf^=http]::after {  
  content:"(" attr(herf) ")";  
}

如今在CSS3中使用“::before”和“::after”越来越多见，例如给链接添加ICON的效果。Font Awesome站点制作的ICON就使用伪元素“::before”和“::after”，下面截取部分代码。

/*  Font Awesome styles  
    ------------------------------------------------------- */  
[class^="icon-"]:before,  
[class*=" icon-"]:before {  
  font-family: FontAwesome;  
  font-weight: normal;  
  font-style: normal;  
  display: inline-block;  
  text-decoration: inherit;  
}  
a [class^="icon-"],  
a [class*=" icon-"] {  
  display: inline-block;  
  text-decoration: inherit;  
}  
/* makes the font 33% larger relative to the icon container */  
.icon-large:before {  
  vertical-align: middle;  
  font-size: 1.3333333333333333em;  
}  
.btn [class^="icon-"],  
.nav-tabs [class^="icon-"],  
.btn [class*=" icon-"],  
.nav-tabs [class*=" icon-"] {  
  /* keeps button heights with and without icons the same */  
 
  line-height: .9em;  
}  
li [class^="icon-"],  
li [class*=" icon-"] {  
  display: inline-block;  
  width: 1.25em;  
  text-align: center;  
}  
li .icon-large:before,  
li .icon-large:before {  
  /* 1.5 increased font size for icon-large * 1.25 width */  
 
  width: 1.875em;  
}  
ul.icons {  
  list-style-type: none;  
  margin-left: 2em;  
  text-indent: -0.8em;  
}  
ul.icons li [class^="icon-"],  
ul.icons li [class*=" icon-"] {  
  width: .8em;  
}  
ul.icons li .icon-large:before,  
ul.icons li .icon-large:before {  
  /* 1.5 increased font size for icon-large * 1.25 width */  
  vertical-align: initial;  
}  
.icon-bullhorn::before {  
  content: "\f0a1";  
}  
.icon-beaker::before {  
content: "\f0c3";  
}

效果如图2-50所示。

0 0