如何只将部分文字放在彩色div白色的顶部？

Question

我怎么才能在红色div白色上只制作文字的一部分？ （所以顶部保持深灰色，但底部保持白色）

Answer 1

你可以这样做

＆＃13;

＆＃13;

.box {
      height: 60px;
      line-height: 60px;
      position: relative;
      text-align: center;
      width: 80px;
  }
  .box:before {
      content: '';
      display: block;
      position: absolute;
      background: red;
      left: 0;
      right: 0;
      height: 30px;
      bottom: 0;
  }
  span {
      color: #fff;
      position: absolute;
      left: 0;
      right: 0;
      height: 30px;
      line-height: 0;
      bottom: 0;
      line-height: 0;
      overflow: hidden
  }

＆＃13;

<div class="box">
    60%
<span>
    60%
</span>
</div>

＆＃13;

＆＃13;

＆＃13;

更新：这是另一个代码。现在你只需要改变通常定义的:before and :after伪元素的高度，你需要在一个地方改变它。只需将值从50％更改为您想要的任何值。我希望它有所帮助：

＆＃13;

＆＃13;

.box {
    align-items: center;
    display: flex;
    height: 60px;
    justify-content: center;
    position: relative;
    visibility: hidden;
    width: 80px;
}
.box:before,
.box:after {
    bottom: 0;
    content: attr(data-value);
    display: block;
    height: 50%;
    left: 0;
    line-height: 0;
    position: absolute;
    right: 0;
    text-align: center;
    visibility: visible;
}
.box:before {
    color: #000;
    z-index: 2;
}
.box:after {
    background: red;
    color: #fff;
    overflow: hidden;
    z-index: 3;
}

＆＃13;

<div class="box" data-value="60%">
    60%
</div>

＆＃13;

＆＃13;

＆＃13;