css before,after伪类添加图片、文字、标签属性

文章参考

1. 伪元素中content的用法详解

问题描述

想利用 ::before 伪类添加一个图片，发现不能改变图片的大小，写一个学习笔记，方便自己学习

content的值可以是文字和字符串啦

a::before{
    content:'我是before内容';
}
a::after{
    content:'我是after内容';
}

content还可以是图片

a::after{
    content:url(../images/104.jpg);
}

设置图片的大小

1. content 默认是内敛元素
2. 要将其改为 block / inline-block 元素，这样就可以设置 height 和 width

&::before {
	content: '';
	background-image: url('../images/icon.png');
	height: 50px;
	width: 50px;
	display: inline-block;
	background-size: cover;
	position: absolute;
	top: -15px;
	left: 40%;
}

插入元素的属性值att()

att()里面可以加的是主元素某些属性的值，然后就会显示出来

<a href="http://www.baidu.com" style="color: red">

a::after{
    content:attr(href);
}

attr(href) 表示content的内容是 href的值