在 `<progress>` 栏上显示 ::before 伪元素

Question

我试图在

::before

栏上显示

<progress>

伪元素，就像带有

value

属性的标签一样。目前，我有一个解决方案，可以在 Brave (v1.61.109) 中显示

::before

，但它不会出现在 Safari(17.1.2) 和 Firefox (121.0) 中。然而，我仍然遇到一个关于伪元素高度考虑的问题。我认为自然伪元素本身对流程没有直接影响。但是，我想找到一种有效的解决方法。

除了显示元素之外，我还希望将其考虑在父框的高度中，特别是

.card

。我正在寻找动态解决方案。

这是 HTML 代码：

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

这是相关的 CSS：

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

progress[value] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    width: 100%;
}

progress {
    position: relative;
}

progress:before {
    content: attr(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;
}

有人知道如何解决此显示问题吗？

Answer 1

我遇到了你的问题，到目前为止我唯一能想到的解决方法是使用一些 javascript 来更新进度 % 而不是 CSS 中的 attr() 。

我选择JS有2个原因，

1. 很简单。
2. 我们可以避免使用 :before 伪元素出现的一些问题。 (::before 伪元素在 Safari 中似乎效果不佳，并且伪元素不被视为在父元素的高度内。)

您可以尝试使用此模板并对其进行编辑以满足您的需求。 请查看此处的 codepen 进行演示。 https://codepen.io/Jun-Wen-Soh/pen/ZEPQgGR

HTML

<div class="card">
  <p>Item 1</p>
  <p>Item 2</p>
  <div class="wrapper">
    <div id="progress-label"></div>
    <label for="progress-bar">Progress:</label>
    <progress id="progress-bar" max="100" value="100"></progress>
  </div>
</div>

CSS

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

.wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

progress[value] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  width: 100%;
}

progress {
  position: relative;
}

#progress-label {
  font-size: 2rem;
  color: black;
  text-align: left;
  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

const progressBar = document.getElementById('progress-bar');
const progressLabel = document.getElementById('progress-label');

progressLabel.textContent = progressBar.value + '% some text here';