.border-bottom的&:before究竟是什么意思？
来源：8-3 Vue项目城市选择页 - 列表布局
慕莱坞4494902
2020-09-28
老师，在src\pages\city\components\List.vue里
template中的
<div class="item border-bottom">阿拉尔</div>
使用到了border-bottom样式：
&:before
border-color: #c00
想问一下，其中的&:before究竟是什么意思？
我查百度说，是在元素内容前插入一个伪元素，照这样说的话，显示效果应该是在"阿拉尔"上方插入一条红线，但实际却是在“阿拉尔”下方插入了一条红线：
但在chrome调试工具里查看，这个伪元素又确实是在“阿拉尔”前面：
我做了个试验，如果把代码改成这样，显示效果就变成了：红线在“阿拉尔”上方
<template>
...
<div class="item border-top">阿拉尔</div>
...
</template>
<style lang='stylus' scoped>
...
.border-top
&:before
border-color: #c00
...
</style>
所以我猜测，红线在“阿拉尔”的上面还是下面，其实和&:before无关，而取决于样式名是.border-bottom还是.border-top。
但是我还是不明白，&:before里的"before"究竟是什么意思，是在“阿拉尔”的前面，还是在样式“.bottom-before”的前面？ 还有，在前面插入了一个什么东西呢？是插入了一个伪元素，还是插入了一个“border-color: #c00”的样式？谢谢！
写回答
1回答
-
同学你好，你的思考过程很精彩值得学习借鉴，不过你忘记了吗，border-bottom是我们引入的border.css，所以我们要查看他的源码就可以知道为什么要这么写了，源码中有这样一段代码：
.border-bottom::before, .border-topbottom::after, .border-rightbottom::after, .border-bottomleft::before { border-bottom: 1px solid #eaeaea; transform-origin: 0 100%; }因此我们在写的时候只是想去修改他默认的边框颜色：
.border-bottom::before { border-color: #c00 }512020-09-28
相似问题