<div class="home_about_img"></div>设置伪元素

您可以使用以下样式为元素设置伪元素：

.home_about_img::before {
   content: "";
   display: block;
   width: 100px;
   height: 100px;
   background-color: red;
}

.home_about_img::after {
   content: "";
   display: block;
   width: 50px;
   height: 50px;
   background-color: blue;
}

在上面的示例中，我们为 `.home_about_img` 元素设置了两个伪元素 `::before` 和 `::after`。我们分别为它们设置了不同的宽度、高度和背景颜色，并使用 `content` 属性为空字符串来确保它们在页面上显示。请注意，我们使用双冒号 `::` 来表示伪元素，而不是单冒号 `:`，以与伪类区分开来。

相关问题

<div class="image"> <img src="image/about-img.jpg" alt=""> </div>修改以上代码，使鼠标悬浮时显示另一张图片

上述代码是一个HTML结构，包含了一个`<div>`元素和一张`<img>`标签，当鼠标悬停在图片上时，如果你想显示另一张图片，你可以通过CSS的`:hover`伪类来实现。以下是修改后的代码：

<div class="image hover-image-container">
    <img src="image/about-img.jpg" alt="" class="current-image">
    <img src="image/hover-img.jpg" alt="" class="hover-image hidden">
</div>

<style>
    .image {
        position: relative;
    }
    
    .current-image {
        display: block;
    }

    .hidden {
        display: none;
    }

    .hover-image-container:hover .current-image {
        opacity: 0;
        transition: opacity 0.5s ease-out;
    }

    .hover-image-container:hover .hover-image {
        display: block;
        opacity: 1;
    }
</style>

在这个例子中，我们添加了一个额外的`<img>`标签作为隐藏的hover图像，并给它一个`.hidden`类使其默认隐藏。当鼠标悬停在`.image`容器上时，当前图片变为半透明并隐藏起来，同时显示`.hover-image`。