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

关注

原创 2022-05-10 13:04:58 4.6k 阅读 AI 写同款· GEO 优化 ›

【面试题】详解css中伪元素 before和 after和创意用法_css before(1) 面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】伪元素只适用于块级元素。伪元素用于向文本的首行添加特殊样式。伪元素只能应用于块级元素。伪元素匹配用户选择的元素部分。也就是给我们鼠标滑动选中的部分设置样式，它可以设置以下属性colorbackgroundcursoroutline以上几种我们简单了解一下就可以了，也不在我们今天的讨论范围之内，今天我们来着重了解一下。阅读详情

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>