纯CSS方式使div底部的进度条？

Question

我试图在下面制作此模型的纯CSS版本。

理想的情况下，

• 不管里面的名字（最大15个字符），宽度都是恒定的，
• 右侧的图标面板将始终存在，
• 但是图标本身可以显示/隐藏，并保持其位置

那不是真的，但是我最大的麻烦是底部的exp栏。 有没有一种纯CSS方式可以使它动态化？ 我猜是两个div，一个是100％的宽度，另一个将是顶部，无论需要什么百分比。

到目前为止，这是我能够执行的操作：

 .sprite { vertical-align:middle; } .exp, .info, .pkmn_special { display: inline-block; } .pkmn_special { background-color: rgba(142,109,146,0.55); } .info { width: 230px; background: linear-gradient(15deg,#745fb5,#9a6dbb); background: #745fb5; color: white; padding: 5px; border-radius: 3px; box-shadow: 0 1px 1px rgba(102,119,136,0.55); text-shadow: 0 1px 1px rgba(51,68,85,0.3); white-space: nowrap; border-bottom: solid 5px grey; } .pkmn_name { font-size: 1.2em; } 

 <div class="info"> <img class="sprite" src="https://cdn.bulbagarden.net/upload/e/ea/113MS.png" /> <code class="pkmn_name">15Characterssss</code> <div class="pkmn_special"> <img src="https://cdn.bulbagarden.net/upload/c/c5/Leaf_Crown_Sprite.png" /> <img src="https://image.ibb.co/kB8vi6/heart.png"> <img src="https://image.ibb.co/e7w4bR/Shiny_VIStar.png"> </div> <div class="exp"> </div> </div> 

如您所见，它看起来非常糟糕。 谁能帮助我？ 谢谢

Answer 1

您可以使用pseudoelement 。

根据需要更新width 。

如果您更改.info的边框宽度，则需要同时调整pseudoelement height和bottom位置。

还要注意border-radius 。 您可以设置特定的角以在pseudoelement上pseudoelement圆以匹配容器。

 .sprite { vertical-align: middle; } .exp, .info, .pkmn_special { display: inline-block; } .pkmn_special { background-color: rgba(142, 109, 146, 0.55); } .info { width: 230px; background: linear-gradient(15deg, #745fb5, #9a6dbb); background: #745fb5; color: white; padding: 5px; border-radius: 3px; box-shadow: 0 1px 1px rgba(102, 119, 136, 0.55); text-shadow: 0 1px 1px rgba(51, 68, 85, 0.3); white-space: nowrap; border-bottom: solid 5px grey; position: relative; } .info:after { content: ''; position: absolute; left: 0; bottom: -5px; height: 5px; background: green; width: 60%; display: inline-block; border-radius: 0 0 3px 3px; } .pkmn_name { font-size: 1.2em; } 

 <div class="info"> <img class="sprite" src="https://cdn.bulbagarden.net/upload/e/ea/113MS.png" /> <code class="pkmn_name">15Characterssss</code> <div class="pkmn_special"> <img src="https://cdn.bulbagarden.net/upload/c/c5/Leaf_Crown_Sprite.png" /> <img src="https://image.ibb.co/kB8vi6/heart.png"> <img src="https://image.ibb.co/e7w4bR/Shiny_VIStar.png"> </div> <div class="exp"> </div> </div> 

Answer 2

.sprite {
  vertical-align: middle;
}

.exp,
.info,
.pkmn_special {
  display: inline-block;
}

.pkmn_special {
  background-color: rgba(142, 109, 146, 0.55);
}    
.info {
  width: 230px;
  background: linear-gradient(15deg, #745fb5, #9a6dbb);
  background: #745fb5;
  color: white;
  padding: 5px;
  border-radius: 3px;
  box-shadow: 0 1px 1px rgba(102, 119, 136, 0.55);
  text-shadow: 0 1px 1px rgba(51, 68, 85, 0.3);
  white-space: nowrap;
  border-bottom: solid 5px grey;
  position: relative;      
}

.info:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -5px;
  height: 5px;
  background: green;
  width: 60%;
  display: inline-block;
  border-radius: 0 0 3px 3px;
}

.pkmn_name {
  font-size: 1.2em;
}