css伪元素(before与after)

最近因为一些网页的需要,比较深入的使用了CSS的“伪元素”(Pseudo Element),发现原来不只是用用before或after而已,可以玩的东西还真是不少,所以就来篇文章,把这些比较不常玩的用法纪录一下。

什么是“伪元素”?
“伪元素”之所以称作“伪”,除了英文从“Pseudo”翻译过来之外,就是因为它并不是真正网页里的元素,但行为与表现又和真正网页元素一样,也可以对其使用CSS操控。

跟伪元素类似的还有“伪类”(Pseudo classes),在W3C的定义里总共有五个伪元素(其他仍在测试阶段),分别是::before、::after、::first-line、::first-letter和::selection,为了和伪类区分,伪元素使用两个冒号“::”开头,而伪类使用一个冒号“:”开头(像是:hover、:target…等)。

虽然现在的浏览器就算写一个冒号也可以正常运作,不过为了方便区分,用两个冒号还是比较好的,而且不论浏览器是什么,::selection必须是两个冒号才能正常运作。

认识::before与::after
::before、::after大概是最常使用的伪元素,两者都是以display:inline-block的属性存在,::before是在原本的元素“之前”加入内容,::after则是在原本的元素“之后”加入内容,同时伪元素也会“继承”原本元素的属性,如果原本文字是黑色,伪元素的文字也会是黑色。

举例来说,下面这段代码,有一个div内容是“大家好,我是div”,使用::before、::after之后,会在原本div的前后各添加一段文字,并且让这两段文字都呈现红色。

div::before{
    content:"我是 before";
    color:red;
}
div::after{
    content:"我是 after";
    color:red;
}

css伪元素(before与after)

实用的content
上述的内容乍看之下很容易理解,比较需要注意的是一定要具备content的属性,就算是只有content:“”;都可以,因为没有content的伪元素是不会出现在画面上的,然而content是个很特别的属性,它可以使用attr直接获取内容元素的属性值(attribute),举例来说,在HTML里有一个超链接,点击后会弹出新视窗并连接至Google:

<a href="https://www.google.com" target="_blank">google</a>

使用下列的代码用法,将会把超链接的href内容与target内容,透过伪元素一前一后的显示出来。

a::before{
  content: attr(href);
  color:red;
}
a::after{
  content: attr(target);
  color:green;
}

css伪元素(before与after)

此外content内容是可以“相加”的,不过用法不像JavaScript使用+号来相连,而是直接用一个空格键就可以不断的累加下去,以下面的代码来说,可以在刚刚撷取的超链接文字后方和target属性前方,加入标点符号。

a::before{
  content: "( " attr(href) " ) < ";
  color:red;
}
a::after{
  content: " > ( " attr(target) " ) ";
  color:green;
}

css伪元素(before与after)

content甚至可以使用url放入图片图片的功能,下列的代码会呈现出三张图片。

div::before{
  content:url(图片网址) url(图片网址) url(图片网址);
}

css伪元素(before与after)

content搭配quotes使用
在CSS里有个不常用的属性就是quotes,这是做为定义“括号格式”的属性,也就是如果在一段文字被<q></q>包住,这段文字的前后就会出现自定义的括号,而且quotes支持巢状的结构,也就是你可以一层层的写下去,以下面这段HTML文字举例:

最外层<q>第一层<q>第二层</q><q>第二层<q>第三层</q></q></q>

quotes的属性如果只写一层,就会看到只出现一种括号,前后括号使用空白区隔,两组为一个单位,前后可以不同符号。

q{
  quotes: ' < ' ' > ';
}

css伪元素(before与after)

如果写了三层,就会看到出现三种括号,支持把文字当作括号使用。

q{
  quotes: ' < ' ' > ' ' ya ' ' ya ' ' ( ' ' ) ' ;
}

css伪元素(before与after)

同样的道理,我们可以应用在content里面,而且透过伪元素已::before和::after已经处于前后的预设位置,甚至不用<q></q>就实现前后括号的效果,以下面这段HTML文字举例,把刚刚的q全部换成span:

最外层<span>第一层<span>第二层</span><span>第二层<span>第三层</span></span></span>

CSS的部分比较特别,在伪元素content里使用了open-quote(启始括号)和close-quote(结束括号)这两个有趣的值,换句话说open-quote对应到<q>,close-quote对应到</q>,此外也由于括号是在伪元素内,就可以指定不同的颜色或样式了。

span{
  quotes: ' < ' ' > ' ' ya ' ' ya ' ' ( ' ' ) ' ;
}
span::before{
  content:open-quote;
  color:red;
}
span::after{
  content:close-quote;
  color:#aaa;
}

css伪元素(before与after)

小结
虽然说伪元素很好用,但伪元素的内容实际上不存在网页里(如果打开浏览器的开发者工具,是看不到内容的),所以如果在里头塞了太多的重要的内容,反而会影响到SEO的效果,因此对于使用伪元素的定位,还是当作“辅助”性质会比较恰当。
css伪元素(before与after)

css

相关推荐