面试题：CSS伪元素选择器::before与::after实现自适应图文混排效果

Question

有一个文章展示页面，每篇文章包含图片和文字。需要通过::before或::after伪元素实现一种效果：当屏幕宽度大于800px时，图片在左侧，文字在右侧，且在图片右上角通过伪元素添加文章发布日期；当屏幕宽度小于等于800px时，图片在上，文字在下，同时伪元素添加的日期显示在图片下方。请描述实现思路并给出关键的CSS代码。

Answer 1

实现思路

1. 使用媒体查询@media来判断屏幕宽度，针对不同宽度设置不同的布局。
2. 对于图片和文字部分，在大屏幕下使用flex布局实现左右排列，小屏幕下使用默认的块级元素垂直排列。
3. 通过::before或::after伪元素添加文章发布日期，并使用position定位来控制其位置。

关键CSS代码

/* 通用样式 */
.article {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
.article img {
    width: 100%;
    height: auto;
}
.article p {
    width: 100%;
}

/* 屏幕宽度大于800px时 */
@media (min-width: 801px) {
   .article img {
        width: 40%;
        position: relative;
    }
   .article p {
        width: 60%;
    }
   .article img::after {
        content: "文章发布日期";
        position: absolute;
        top: 10px;
        right: 10px;
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        padding: 5px;
        border-radius: 5px;
    }
}

/* 屏幕宽度小于等于800px时 */
@media (max-width: 800px) {
   .article img::after {
        content: "文章发布日期";
        display: block;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        padding: 5px;
        border-radius: 5px;
        margin-top: 10px;
    }
}

<div class="article">
    <img src="article-image.jpg" alt="文章图片">
    <p>文章文字内容...</p>
</div>