如何在红色区块旁添加带文字的黑色区块（CSS实现）

我希望在红色区块（h2元素）后添加一个带有文字的黑色区块，效果与示例截图类似。我尝试了以下代码，但没有效果，我是CSS新手... :/

尝试的代码：

h2 {
    width: fit-content;
    background-color:#FF0000;
}
h2:after {
    display: block;
    width: 50px;
    background-color:#000000;
}

你的代码无效的核心原因是伪元素:after必须设置content属性才会被渲染，另外如果想让黑色块和红色h2在同一行，还需要调整布局方式，以下是修正后的代码：

h2 {
    width: fit-content;
    background-color: #FF0000;
    /* 使用flex布局让标题和伪元素横向排列 */
    display: inline-flex;
    align-items: center;
    /* 可选：给标题加内边距，让文字不贴边 */
    padding: 0 5px;
}
h2:after {
    /* 这里填写黑色区块要显示的文字 */
    content: "自定义文字";
    display: inline-block;
    width: 80px;
    background-color: #000000;
    /* 设置文字颜色为白色，保证可读性 */
    color: #ffffff;
    padding: 0 5px;
    /* 和红色区块拉开间距 */
    margin-left: 10px;
}

关键说明 #

1. content属性是伪元素的必填项，哪怕只想显示空块也要写content: ""
2. 通过display: inline-flex（h2）和display: inline-block（伪元素）实现横向排列，避免伪元素自动换行
3. 可以调整width、padding、margin等属性，让效果匹配示例
4. 黑色背景上建议设置白色文字，提升可读性

内容的提问来源于stack exchange，提问作者Damian ProExCurator Dbrowski