css带小图标的ul菜单 |chrome css grid

<ul class="menu">
<li class="home"><a href="#">首页</a></li>
<li class="about"><a href="#">关于大家</a></li>
<li class="contact"><a href="#">联系大家</a></li>
<li class="search"><a href="#">搜索</a></li>
</ul>.menu {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
display: inline-block;
margin-right: 20px;
}
.menu li a {
color: #444;
display: block;
padding: 10px 15px;
position: relative;
}
.menu li a:before {
content: "";
display: inline-block;
height: 10px;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 10px;
}
.menu li.home a:before {
background-color: #E74C3C;
}
.menu li.about a:before {
background-color: #3498DB;
}
.menu li.contact a:before {
background-color: #1ABC9C;
}
.menu li.search a:before {
background-color: #9B59B6;
}

在上面的代码中，大家首先定义了一个ul元素，其中包含四个li元素。每个li元素都有一个不同的类名，用于定义每个元素的颜色。

大家接下来将样式应用于整个菜单，例如删除列表项的默认样式并给列表项添加一个内边距。

然后，大家定义每个li元素的display属性为inline-block，这使得列表项在同一行显示。大家还添加了一个左外边距，以便在列表项之间添加间距。

对于每个a标签，大家定义了字体颜色、内边距和位置。大家还添加了一个:before伪元素，该元素用于在链接前添加小圆点。伪元素的内容属性被设置为空字符串，这意味着它将作为空元素出现在a标签前。大家还定义了伪元素的位置属性，用于将小圆点居中在a标签前。

最后，大家根据每个li元素的类名，为伪元素定义不同的背景颜色。这使得每个链接前的小圆点都具有与列表项相匹配的颜色。

通过这些步骤，大家可以轻松地创建一个CSS带小图标的ul菜单，让您的网页看起来更加专业和吸引人。希望这篇文章对您有所帮助！