如何在CSS伪选择器的content属性中添加多段文本内容

下面是两种可落地的实现方案，推荐优先使用第一种，可维护性更高：

方案1：单伪元素实现多行内容（推荐） #

核心逻辑是利用CSS content属性支持\A转义字符实现换行，配合自定义属性存动态内容，无需占用两个伪元素：

• 优势：代码冗余度低、内容和样式分离，修改节点文本不需要调整CSS
• 实现步骤：

1. 给HTML的节点元素添加data-*自定义属性存储日期、状态内容
2. 伪元素的content属性拼接两个属性值，用\A分隔，添加white-space: pre-wrap让换行生效
3. 仅针对奇偶节点分别设置上下定位即可，通用样式统一写

修改后的HTML代码（节点部分） #

<ul>
    <li class="circle odd" data-date="25/08/2021 8:00 PM" data-status="Approved By Co-ordinator"></li>
    <li class="circle even" data-date="25/08/2021 8:00 PM" data-status="Approved By Co-ordinator"></li>
    <li class="circle odd" data-date="25/08/2021 8:00 PM" data-status="Approved By Co-ordinator"></li>
    <li class="circle even" data-date="25/08/2021 8:00 PM" data-status="Approved By Co-ordinator"></li>
    <li class="circle odd" data-date="25/08/2021 8:00 PM" data-status="Approved By Co-ordinator"></li>
</ul>

修改后的CSS代码（替换原来的odd/even相关样式） #

/* 通用节点伪类样式，统一写公共属性 */
.circle::before {
    content: attr(data-date) "\A" attr(data-status);
    white-space: pre-wrap;
    position: absolute;
    width: max-content;
    border-radius: 7px;
    background-color: deepskyblue;
    padding: 10px;
    color: #ffffff;
    font-family: Open Sans;
    text-align: center;
}
/* 日期单独设置样式 */
.circle::before::first-line {
    font-weight: 400;
    font-size: 14px;
}
/* 状态单独设置样式 */
.circle::before {
    font-weight: 600;
    font-size: 13px;
}

/* 仅区分奇偶节点的定位，不用重复写公共属性 */
.odd::before {
    transform: translate(-45%, 70%);
}
.even::before {
    transform: translate(-45%, -170%);
}

方案2：双伪元素区分内容（适合样式差异大的场景） #

如果日期和状态的背景、边距等样式差异很大，可以保留两个伪元素，优化冗余代码即可：

• 修复原代码问题：你原有代码中even的after写了两次content属性，后面的会覆盖前面的，导致状态文本不显示
• 优化逻辑：公共属性统一写在.circle::before和.circle::after中，仅针对奇偶节点设置定位偏移

两种方案都可以实现你需要的上下交错展示双行文本的效果，第一种代码更简洁，后续新增节点只需要修改HTML的自定义属性值即可，不需要调整CSS。

内容的提问来源于stack exchange，提问作者Deepkk-9