面试题：CSS伪元素选择器::before和::after在响应式布局中的应用

Question

在一个响应式网页布局中，有一个导航栏（nav元素）。当屏幕宽度小于600px时，需要使用::before和::after伪元素在导航栏前后分别添加一个特殊的图标（可以用Unicode字符表示），并且图标要随着导航栏的样式变化而变化（如颜色、大小）。请写出相应的CSS媒体查询代码以及使用伪元素的样式代码。

Answer 1

@media (max - width: 600px) {
    nav::before {
        content: "\2605"; /* 这里以五角星为例，可替换为你想要的Unicode字符 */
        color: inherit;
        font - size: inherit;
        margin - right: 5px;
    }
    nav::after {
        content: "\2606"; /* 这里以空心五角星为例，可替换为你想要的Unicode字符 */
        color: inherit;
        font - size: inherit;
        margin - left: 5px;
    }
}