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

原创已于 2022-05-10 13:04:58 修改 · 4.5k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2022-04-13 11:19:27 首次发布

css编写中的问题专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何利用CSS伪元素`:after`在`a`标签后插入图片，并解决调整图片大小的问题。通过将`content`属性设置为空，然后使用`background`属性结合`background-size: cover;`来实现图片的显示和尺寸控制。这种方法可以确保图片在元素中按预期显示并保持比例。

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>