能否在单个::before伪元素中实现多样式与多内容？

可以实现，核心思路是利用::before伪元素的content添加换行符，结合::first-line伪元素分别控制标题和副标题的样式。

修改后的完整CSS代码 #

div::before {
    content: 'Title\A Subtitle'; /* 添加换行符分隔标题和副标题 */
    white-space: pre-wrap; /* 让换行符生效 */
    background-color: #8fa63e;
    display: block;
    width: 100%;
    color: #FFF;
    padding: 20px 25px;
    text-align: center;
    min-height: 150px;
    border-radius: 4px 4px 0px 0px;
    /* 这里设置副标题的基础样式，标题样式交给::first-line */
    font-size: 18px;
    font-family: sans-serif;
    font-weight: normal;
    line-height: 2; /* 调整行高让标题和副标题分开 */
}

/* 选中::before里的第一行文本（即标题）单独设置样式 */
div::before::first-line {
    font-size: 32px !important;
    font-family: var(--head-font);
    font-weight: 300 !important;
    line-height: 3; /* 单独调整标题行高 */
}

div::after {
    content: 'Body text \A More body text';
    white-space: pre-wrap;
    font-size: 18px;
    line-height: 1.4em;
    color: #333;
    display: block;
    width: 100%;
    background-color: #FFF;
    color: #000;
    padding: 20px;
    text-align: left;
    border-bottom: 1px solid #c2c2c2;
    border-left: 1px solid #c2c2c2;
    border-right: 1px solid #c2c2c2;
    flex-grow: 1;
    border-radius: 0px 0px 4px 4px;
}

原理说明 #

1. 在::before的content中用\A插入换行符，通过white-space: pre-wrap让浏览器识别并渲染换行，将标题和副标题分为两行。
2. 使用::before::first-line伪元素选中第一行文本（即主标题），单独设置它的字体、字号、行高等样式，剩下的第二行文本自动继承::before里设置的副标题样式。
3. 这种方法不需要额外的DOM元素，也不需要嵌套伪元素，完全符合限制条件。

内容的提问来源于stack exchange，提问作者roboron