：调整完父母身高后

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> 

Answer 2

您可以将.pure-progress:after的css更新为

.pure-progress:after {
  display: block;
  height: inherit;
  line-height: 1.8rem;
  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);
}

演示

更新

当进度栏与内容文本重叠时，我的答案不起作用。 因此，有必要使用position: relative kukkuz建议的相对

更新后的样式如下：

.pure-progress:after {
  position: relative;
  display: block;
  height: inherit;
  line-height: 1.8rem;
  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);
}

更新的演示