CSS 技巧：用伪元素创建菱形无序列表

"使用 CSS 伪元素轻松创建具有菱形标记的无序列表。本文提供详细的示例代码，并解释如何自定义菱形列表的样式。"\n\n"HTML:"\n"\n"html\n<ul class=\"diamond-ul\">\n <li>Item 1</li>\n <li>Item 2</li>\n <li>Item 3</li>\n <li>Item 4</li>\n <li>Item 5</li>\n</ul>\n"\n\n"CSS:"\n"\n"css\n.diamond-ul {\n position: relative;\n list-style: none;\n padding: 0;\n}\n\n.diamond-ul li {\n position: relative;\n padding-left: 20px;\n}\n\n.diamond-ul li:before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 0;\n transform: translateY(-50%);\n width: 10px;\n height: 10px;\n background-color: black;\n border-radius: 50%;\n}\n\n.diamond-ul li:nth-child(odd):before {\n transform: rotate(45deg) translateY(-50%);\n}\n\n.diamond-ul li:nth-child(even):before {\n transform: rotate(45deg) translateY(-50%) translateX(-50%);\n}\n"\n\n"这段代码将会创建一个菱形的无序列表，每个列表项前面都有一个菱形的标记。你可以通过调整.diamond-ul和.diamond-ul li的样式来自定义菱形列表的外观。"