html - :after adjust height of parent

Question

我有一个进度条，我正在尝试根据 :after 伪元素的 content 调整父项的高度。运行代码后，您会看到 30% 部分位于 div 内。

有没有办法调整 :after 附加到的元素的高度？

我尝试更改 :after 项的 display 属性，但没有做任何事情。

.pure-progress {
  display: block;
  position: relative;
  width: 100%;
  min-height: 10px;
}

.pure-progress>.pure-progress--bar {
  position: absolute;
  background-color: blue;
  height: 100%;
  transition: width 200ms ease-in-out;
}

.pure-progress:after {
  position: absolute;
  height: inherit;
  line-height: 1.8rem;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  text-align: center;
  content: attr(data-progress);
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2), inset 0 2px 3px rgba(0, 0, 0, 0.2);
}

<div class="pure-progress" data-progress="30%">
  <div class="pure-progress--bar" style="width:30%"></div>
</div>

Answer 1

您可以将 absolute 更改为 relative 并添加 display: block - 请参见下面的演示:

.pure-progress {
  display: block;
  position: relative;
  width: 100%;
  min-height: 10px;
}

.pure-progress>.pure-progress--bar {
  position: absolute;
  background-color: blue;
  height: 100%;
  transition: width 200ms ease-in-out;
}

.pure-progress:after {
  /*position: absolute;*/
  position: relative; /* ADDED */
  display: block; /* ADDED */
  height: inherit;
  line-height: 1.8rem;
  /*
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  */
  margin: auto;
  width: 100%;
  text-align: center;
  content: attr(data-progress);
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2), inset 0 2px 3px rgba(0, 0, 0, 0.2);
}

<div class="pure-progress" data-progress="30%">
  <div class="pure-progress--bar" style="width:30%"></div>
</div>