css使用伪元素插入图片大小调整问题
需求描述:
想要利用伪元素在a标签后插入图片,调整为合适大小。
效果图:
问题描述:
使用伪元素例如::after的content属性插入图片不能调整图片大小问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a{
color: blueviolet;
}
.Todo::after{
content: url('./external-link-52.png');
display: inline-block;
/* 设置大小无效 */
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<p></p>
<p>想给后面的a元素之后插入一个图片,这里是<a href="" class="Todo">a元素</a>后面插入图片。</p>
</body>
</html>
解决方案:
将content属性设置为空,伪元素after设置为inline-block,调整盒子大小后用background属性进行插入图片。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a{
color: blueviolet;
}
.Todo::after{
content: '';
display: inline-block;
background: url('./external-link-52.png');
background-size: cover;
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<p></p>
<p>想给后面的a元素之后插入一个图片,这里是<a href="" class="Todo">a元素</a>后面插入图片。</p>
</body>
</html>