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>

使用伪元素插入图片大小调整问题相关推荐

CSS伪元素插入文字
解决方案: 当项目中需要给UI组件中的元素插入文字时,可以使用伪元素插入文字,调整样式此处使用:after伪元素来插入文字 /* 在vue3项目中使用:deep+scope实现局部样式 */ :de ...
image图片大小调整和方向调整（UIImageOrientation）
图片大小调整: 此处是写在UIImage分类中的方法self即为image,size为自己传入的大小,根据size生成图片图片不会被剪裁,但可能会被拉伸变形. - (UIImage *)thumWit ...
利用伪元素给图片在鼠标悬停时添加背景图片
利用伪元素给图片在鼠标悬停的时候添加背景图片,这种效果在电影网站上使用的比较频繁,主要是鼠标悬停的时候显示出播放的图标,点击图片链接后就会进入视频详情页面,而使用伪元素是为了使我们的html代码更加简 ...
CSS伪元素引用图片logo
在一些文字前需要一个logo,可以使用<img />实现,也可以在文字div上使用伪元素实现. 经过搜索,以及逐条实验,可以用下面的代码实现 &::before {width: ; ...
Typora 调整插入图片大小
Typora 插入图片调整大小如下: style="zoom:43%;" style标签的zoom属性就是图片的相对大小属性如下我需要调整图片大小在文件在最后添加style & ...
html幻灯片图片大小,如何制作ppt？如插入图片、调整图片大小与母版一致！
ppt转换视频,大家还是比较少用吧,有一款新颖的ppt转换器,就可以把ppt转换成任意一种流行格式的视频哦! ppt转换视频官方软件下载: 如何制作ppt(基本简单操作): 1.首先准备好要做成模版的 ...
cssbefore图片大小_before伪类插入图片
需求: 图片放在div里,原来这种需求最先想到的就是定位,但是如果还有其他定位元素的时候,就很容易相互影响,所以这里尝试一下before伪类来实现样式: .box{ width:300px; hei ...
VBA-EXCEL：控制WORD指定位置，插入图片并调整在大小，高低，环绕
Dim WordApp As Object Set WordApp = CreateObject("Word.Application") WordApp.Visible = Tru ...
Excel使用VBA自动调整插入图片大小到单元格
文章目录前言 VBA是什么? 使用步骤 1.新建一个xls表格 2.开启宏功能 3.打开宏界面 4.复制粘贴代码把宏命令添加到快捷访问上总结前言最近突然要做大量带图片的Excel表格,Off ...

使用伪元素插入图片大小调整问题

css使用伪元素插入图片大小调整问题

需求描述：

问题描述：

解决方案：

使用伪元素插入图片大小调整问题相关推荐

最新文章

热门文章