css befor after伪元素学习

基本理解

在指定的元素标签前后增加一些内容，使用到伪元素，比如

<p>123</p>

<style>
	p::before{
		content: "";
	}
</style>

这样写的效果是：比如原来只是渲染p的内容，现在在p所在的区域内，在p的内容前会渲染before的内容

简单来说就是：原来这里有个区域，是要渲染p的内容的，现在在这个区域前面又划分了一块区域，渲染了before的内容，after同理

关于内容

content内容可以直接写文字；如果是连接，需要使用到：

content: "("attr(href)")" // 这个href是p的一个属性

如果是图片，需要使用到background-image，注意属性设置，比如display，宽高，background-image的值的写法，
background-size

p::before{
	content: "";
	display: block;
	width: 40rpx;
	height: 40rpx;
	background-image: url(@/static/logo.png);
	background-size: 100% 100%;
}