面试题：CSS伪元素选择器::before与::after在导航栏样式优化中的应用

Question

假设有一个简单的水平导航栏，使用无序列表实现。要求利用::before或::after伪元素在每个导航项前添加一个独特的图标（比如一个小箭头），并确保在不同屏幕尺寸下，图标和文字都能合理显示和布局。请写出对应的HTML和CSS代码。

Answer 1

HTML代码

<ul class="nav">
    <li><a href="#">首页</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">联系</a></li>
</ul>

CSS代码

.nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.nav li {
    float: left;
}

.nav li a {
    display: block;
    padding: 14px 16px;
    text-decoration: none;
}

.nav li::before {
    content: "→"; /* 小箭头图标 */
    margin-right: 5px;
    display: inline-block;
    vertical-align: middle;
}

/* 响应式设计 */
@media screen and (max-width: 600px) {
   .nav li {
        float: none;
        width: 100%;
    }
}