css伪元素（before与after）

mo0n1andin 发布于2019-08-29 18:38 / 1078人阅读

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

最近因为一些网页的需要，比较深入的使用了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;
}

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

google

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

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

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

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

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

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

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

最外层第一层第二层第二层第三层

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

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

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

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

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

最外层第一层第二层第二层第三层

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

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

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

私有云混合云伪元素获取伪元素 css元素 before

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114467.html

详解 CSS 属性 - :before && :after

摘要：现在我们经常在源码中看到如下的写法这里的和就是我们今天来探讨的伪元素之二。举例说明在这里我们给伪元素添加了属性，并赋值为。这里需要注意两者使用的顺序，伪元素应该位于后面，如果顺序改为是无效的。现在我们经常在 html 源码中看到如下的写法： showImg(http://segmentfault.com/img/bVb9y2); 这里的 ::after 和 ::before 就是...

plokmju88 2019-08-28 17:51 评论0 收藏0
详解 CSS 属性 - :before && :after

摘要：现在我们经常在源码中看到如下的写法这里的和就是我们今天来探讨的伪元素之二。举例说明在这里我们给伪元素添加了属性，并赋值为。这里需要注意两者使用的顺序，伪元素应该位于后面，如果顺序改为是无效的。现在我们经常在 html 源码中看到如下的写法： showImg(http://segmentfault.com/img/bVb9y2); 这里的 ::after 和 ::before 就是...

CoderBear 2019-08-01 14:36 评论0 收藏0
css伪元素（before与after）

摘要：最近因为一些网页的需要，比较深入的使用了的伪元素，发现原来不只是用用或而已，可以玩的东西还真是不少，所以就来篇文章，把这些比较不常玩的用法纪录一下。最近因为一些网页的需要，比较深入的使用了CSS的伪元素（Pseudo Element），发现原来不只是用用before或after而已，可以玩的东西还真是不少，所以就来篇文章，把这些比较不常玩的用法纪录一下。什么是伪元素？伪元素之所以称...

shevy 2019-08-05 16:45 评论0 收藏0
CSS基础篇-- :before && :after的用法，伪类和伪元素的区别

摘要：一的用法如同对伪元素的名称一样，是用来给指定的元素的内容前面插入新的内容。二伪类和伪元素的区别伪类种类伪元素种类伪类作用对象是整个元素例如尽管这些条件不是基于的，但结果每一个都是作用于一个完整的元素，比如整个链接，段落，等等。一：:before && :after的用法 :before 如同对伪元素的名称一样，:before 是用来给指定的元素的内容前面插入新的内容。举例说明： .b...

X_AirDu 2019-08-28 18:15 评论0 收藏0
CSS（一）伪元素的巧用

摘要：并且，一些伪元素可以使开发者获取到不存在于源文档中的内容比如常见的还可以为伪元素定制样式。。中新增加的伪元素必须用伪类使用一个冒号例如。就本文而言，我们将把我们探讨的范围限制在和这两个伪元素的巧用上。作为一门前端er,你肯定熟知 a:hover a:visited.....我还记得在小本本上记着诀窍：love 与 hate 纠缠不休,大家都懂的吧。。。。伪类和...

entner 2019-08-30 15:53 评论0 收藏0