如何实现<progress>标签::before伪元素跨浏览器显示并适配父容器高度？

问题根源 #

1. <progress>属于替换元素，Firefox和Safari不支持为其添加::before/::after伪元素，仅WebKit内核浏览器（如Brave/Chrome）支持该特性。
2. 伪元素默认脱离文档流，导致父容器.card无法计算其高度。

解决方案：用容器包裹<progress>，转移伪元素到容器上 #

通过外部容器承载伪元素，既能解决跨浏览器兼容问题，又能让伪元素参与文档流，自动被父容器计算高度。

修改后的HTML代码

<div class="card">
    <p>Item 1</p>
    <p>Item 2</p>
    <div class="progress-wrapper">
        <progress max="100" value="100"></progress>
    </div>
</div>

对应的CSS代码

.card {
    display: flex;
    flex-direction: column;
    width: 300px;
    background: beige;
}

/* 用容器承载伪元素和progress */
.progress-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* 伪元素与进度条的间距 */
}

progress[value] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    width: 100%;
    height: 1rem; /* 自定义进度条高度 */
}

/* 伪元素挂载到容器上，所有浏览器都能识别 */
.progress-wrapper::before {
    content: attr(data-value) '% some text here';
    font-size: 2rem;
    color: black;
    text-align: center;
    height: 2rem;
    line-height: normal;
}

progress[value]::-webkit-progress-value {
    background-color: green;
    border-radius: .2rem;
}

progress[value]::-moz-progress-bar {
    background-color: green;
    border-radius: .2rem;
}

动态同步进度值（可选）

如果进度值是动态变化的，用JS同步<progress>的value到容器的data-value属性：

const progress = document.querySelector('progress');
const wrapper = progress.parentElement;

// 初始化同步
wrapper.dataset.value = progress.value;

// 监听进度变化，实时同步
progress.addEventListener('input', () => {
    wrapper.dataset.value = progress.value;
});

核心优化点 #

• 替换元素的伪元素兼容性差，用外部容器承载伪元素是最可靠的跨浏览器方案。
• 通过Flex布局让伪元素参与文档流，父容器会自动计算其高度，无需额外处理定位溢出问题。

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