CSS - 为 span 的每个单词设置样式 [重复]答案

【问题标题】：CSS - Style each word of span [duplicate]CSS - 为 span 的每个单词设置样式 [重复]
【发布时间】：2021-03-18 02:43:47
【问题描述】：

我的任务是为某人为我们制作的倒计时设置样式，但棘手的部分是它正在像这样的跨度中呈现：

<span>D H m</span>

我无法真正更改倒计时代码，他们希望我为倒计时中的每组数字创建边框和背景，如下图所示。

有什么方法可以用纯 css 实现吗？

【问题讨论】：

不，您需要将每个部分包装在它自己的跨度中 - 除非您的文字是固定长度的，否则您可以只使用背景图片，但您可能无法使用空格单词正确
您需要使用 3 个元素。 CSS 不能设置单个单词的样式。这不仅仅是关于边框（您可以使用此跨度和父级上的伪元素来渲染它），您无法创建具有这种间隙大小的数字组，等等。
您不能只要求“某人”将各个时间元素放入各个跨度吗？
你能告诉我们周围的 HTML 和 CSS 吗？看起来好像数字的空间是固定的，是吗？
这里是一个很好的起点：stackoverflow.com/a/66133217/8620333

标签： html css

【解决方案1】：

Mayeb 在box-shadow 和pseudo 元素的帮助下。你可以实现这样的目标。

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

&lt;span&gt;D H m&lt;/span&gt;

否则您将不得不使用背景图片。

【讨论】：