Question

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

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

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

.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

您可以将$(document).ready(function() { $('#b').on("click", function() { var normal=$('#a').val(); alert(normal); }); });更改为absolute并添加relative - 请参阅以下演示：

＆＃13;

display: block

＆＃13;

.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);
}

＆＃13;

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);
}

demo

<强>更新

当进度条与内容文本重叠时，我的回答不起作用。因此，有必要按照kukkuz

的建议使用position: relative来定位它

更新后的样式如下：

.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);
}

Updated demo

：调整父母的身高后

2 个答案: