CSS样式得每个单词得跨度

Question

我的任务是设计一个有人为我们制作的倒计时，但棘手的部分是它是在一个跨度内呈现的，如下所示：

D H M

我不能真的改变倒计时代码，他们希望我创建边框和背景的每一组数字在倒计时，像下面的图像。

有没有什么方法可以用纯CSS来实现呢？

Answer 1

不，您不能仅用css更改它。为此您需要一个小型Javascript。如果javascript是可能的，那么您应该提供一个更完整的示例。

Answer 2

Mayeb使用box-shadow和pseudo元素。你可以实现这样的事情。

null

span {
  display: inline-block;
  padding: 0.5rem;
  color: #0f0;
  background: #000;
  position: relative;
  box-shadow:
    2px 2px 0px #000 inset,
    -2px -2px 0px #000 inset,
    4px 4px 0px #0f0 inset,
    -4px -4px 0px #0f0 inset;
}
span::before {
  content: '';
  background: #0f0;
  position: absolute;
  left: 21px;
  top: 2px;
  bottom: 2px;
  width: 2px;
}
span::after {
  content: '';
  background: #0f0;
  position: absolute;
  right: 21px;
  top: 2px;
  bottom: 2px;
  width: 2px;
}

<span>D H m</span>