2. 定义 CSS 样式

接下来，我们利用CSS的::before伪元素为每个列表项动态添加前缀并进行样式化。结合:nth-child选择器，我们可以为不同的列表项指定不同的前缀内容和样式。

.modifyText li:nth-child(1)::before {
    color: black;
    font-weight: bolder;
    content: "Name: "; /* 第一个列表项的前缀 */
}

.modifyText li:nth-child(2)::before {
    color: black;
    font-weight: bolder;
    content: "Age: ";  /* 第二个列表项的前缀 */
}

.modifyText li:nth-child(3)::before {
    color: black;
    font-weight: bolder;
    content: "Gender: "; /* 第三个列表项的前缀 */
}

在上述CSS代码中：

• .modifyText 定位到我们添加了类名的
  元素。
• li:nth-child(n) 精确选择到列表中的第n个
• 元素。
• ::before 在选中的
• 元素内容之前插入生成的内容。
• content 属性定义了要插入的文本内容，即我们的前缀。
• color 和 font-weight 等属性则用于对这些生成的前缀文本进行样式化。

通过这种方式，我们可以独立于HTML结构来管理和修改前缀的样式和内容。

完整示例

将优化后的HTML和CSS结合，即可看到最终效果。

    
    
    
    


    
用户信息列表
    

        
John
        
32
        
Male
    

在此示例中，我们还为前缀添加了不同的颜色，以更好地展示其样式化的灵活性。同时，li元素本身的样式（如color: #333;）则独立作用于列表项的实际内容，前缀的样式不会干扰到它。

注意事项与最佳实践

• 适用场景：此方法最适用于前缀内容相对固定、且其顺序与列表项顺序相对应的场景。如果前缀内容非常动态，或者需要从数据源中获取，那么JavaScript可能会是更合适的解决方案。
• 可维护性：对于非常长的列表，如果每个li项的前缀都不同，CSS代码可能会变得很长。但相比于手动修改HTML，其维护成本仍然较低，因为所有前缀逻辑都集中在CSS中。
• 语义化：这种方法将展示性的前缀从HTML中移除，使HTML结构更具语义性，
• 标签直接承载其核心数据，而不是包含展示性的文本。
• SEO 影响：::before和::after生成的内容通常不会被搜索引擎索引，因此，如果前缀内容对SEO至关重要，则应考虑将其保留在HTML中。但在本例中，前缀通常仅为UI展示目的。
• 替代方案：对于更复杂的动态前缀需求，或者前缀内容与列表项内容存在强关联关系（例如，前缀是内容的一部分），可以考虑使用JavaScript动态生成标签或直接操作DOM。

总结

通过巧妙地运用CSS的::before伪元素和:nth-child选择器，我们可以高效地为HTML列表项动态添加并样式化前缀。这种方法不仅避免了对HTML结构的冗余修改，实现了内容与样式的解耦，还提高了代码的可维护性和灵活性。在处理大量列表数据且前缀模式相对固定的场景下，这是一种强大且优雅的纯CSS解决方案。