伪元素的本质,及妙用
好了,上期讲解了什么是伪类,这期呢,我们来看看伪元素是什么?
我们可以看到,很多网站对它的定义为,用于向某些选择器设置特殊效果,这句话,真的是我还是不明白它在讲什么,太简洁了,我们来仔细分析分析这个鬼东西哈哈
伪元素的本质
这个伪元素,其实呢,就是个元素,但是呢,在html找不到对应的元素,所以它不占用dom元素节点,你只能在css样式里面发现它的踪迹,但是它也能跟其他真正的元素一样,实现相同的效果,因此被称为伪元素,这个元素伪装的到底挺好的。所以,我们来看看,它到底包含着哪些呢
看到这个,相比伪类,真的是福音哈哈。我们先before入手
(一)::before
在元素前插入一些内容,我们看看代码
<div class="pseudo-element">
<p>我是伪元素</p>
</div>
.pseudo-element {
border: 1px solid black;
width: 200px;
height: 200px;
}
好了,在css中加进伪元素的代码
.pseudo-element::before {
content: "我是before";
}
结果如下图所示
发现了没有,我并没有在html中加代码,而是在css中加了个before,也印证上面了上句话,它是不占dom节点的,js无法获取伪元素。下面after 也是同理
(二)::after
.pseudo-element::after {
content: "我是after";
}
写到这里,你可能会觉得,content里面是不是写啥都行呢,它就只能是个字符串或者中文嘛? 哈哈这个问题确实有点意思, 上一篇博客已经整理好啦
https://blog.csdn.net/weixin_44142985/article/details/101594982 这个飞机票,想要了解的小伙伴可以去看看哈
好了,回归正题
(三)::first-line和first-letter 这两个就比较简单点啦,可能有复杂的但是我没想到哈
<div class="test">
<p>我是第一行
<br>
我是第二行
</p>
<h1>我是first-letter</h1>
</div>
.test p::first-line{
color: red;
}
.test h1::first-letter{
color: red;
}
如下图,相对比较简单,看看效果如下
好了,终于到了最艰难的时刻了,伪元素的妙用了
伪元素的妙用有很多,这里举几个例子,抛砖引玉,剩下的靠大伙啦
伪元素妙用
一般伪元素很多玩法,都是通过before和after来达到目的,我们先来看看它的用法
左边两个呢,在我上面的博客都有啦,一个是content的用法,这个是计数器的应用,还有一个清除浮动,第一篇写的很详细啦,有需要的可以去看看,现在我们先从右边开始
(一)与伪类的配合使用
<div class="test-wys">
<p>伪类与伪元素</p>
</div>
.test-wys p{
position: relative;
width: 200px;
height: 200px;
color: red;
background-color: transparent;
}
p::after{
content: "";
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 200px;
background-color: black;
opacity: 0.1;
}
P:hover::after {
opacity: 1;
}
其中涉及到的相对定位relative 和绝对定位absolute不懂得以后会出一个教程哈
上面得代码,如下图所示
鼠标过去的时候,如下图
可能会有小伙伴会问,我直接hover改变它的背景颜色不就好了,为何还要这么麻烦,其实,这种伪类和伪元素的结合,有时候对css优化是有一些方面的帮助的,比如 box-shadow ,通过在伪元素实现box-shadow 阴影,然后在hover改变透明度可以防止重绘,这个进阶的以后在css优化中会讲解
(二)after 和befre的绝对定位的使用
1.划分割线
<span>and</span>
span {
position: relative;
margin-left: 100px;}
span::after {
content: "";
position: absolute;
top: 12px;
left: 0;
width: 100px;
height: 1px;
background-color: black;
margin-left: 40px;
}
span::before {
content: "";
position: absolute;
top: 12px;
right: 0;
width: 100px;
height: 1px;
background-color: black;
margin-right: 40px;
}
2.画出平行四边形
<div class="parallelogram">
平行四边形
</div>
.parallelogram {
width: 200px;
height: 200px;
position: relative;
background: transparent;
margin-left: 100px;
}
.parallelogram::after {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
background: #58a;
transform: skew(45deg);
}
其实本质就是通过伪元素对主元素的形状的重画重写,主元素的那个形状还在,伪元素就是自己根据主元素再画了一个
3.实现三角箭头
<div class="triangle">
三角形
</div>
.triangle {
border: 1px solid;
width: 100px;
height: 100px;
margin-left: 100px;
position: relative;
}
.triangle::after {
content: "";
display: block;
width: 0px;
height: 0px;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid black;
position: absolute;
left: -20px;
top: 30px;
}
在这里,我们要注意的是,border的边框设置成了20px,我们先看看效果
可能你会看不懂他是怎么实现的,我们来分析分析,如下代码
.triangle {
border: 1px solid;
width: 100px;
height: 100px;
margin-left: 100px;
position: relative;
}
.triangle::after {
content: "";
display: block;
width: 100px;
height: 10px;
border-top: 20px solid red;
border-bottom: 20px solid yellow;
border-right: 20px solid black;
position: absolute;
left: -20px;
top: 30px;
}
把高度减少,你就会看到神奇的事情啦,自己动手试一试吧
4.动画效果
<div class="test-animate">
动画
</div>
.test-animate {
border: 1px solid black;
width: 200px;
height: 200px;
margin-left: 600px;
position: relative;
}
.test-animate::before {
content: "";
position: absolute;
top: 0;
width: 200px;
height: 2px;
background-color: black;
transition: 2s all ease;
}
.test-animate:hover::before {
content: "";
position: absolute;
top: -10px;
width: 200px;
height: 2px;
background-color: black;
transition: 0.4s all ease;
}
加上了 transition属性,就可以实现动画效果啦
还有更多效果,很多都是通过绝对定位来实现,加上动画效果,会有出其不意的效果。以后再分享一些相关的动画,敬请期待吧
喜欢的朋友点个关注,下次遇见不迷路哈哈