css - 使用 CSS 在标题后面创建带有弱相同文本的标题文本

Question

我真的不知道，怎么调用它。我需要做这样的事情:

h2 {
text-shadow: 5px 5px #000;
}

<h2>My Text</h2>

所以有我的标题文本，以及背景上的相同文本。它应该是可自动升级的，所以当有人更改“KONTAKT”时，背景文本也会自动更改以保持不变。

理想情况下，是否可以仅使用 CSS 来做到这一点？

我想，这可以用 text-shadow 属性来完成，但似乎不行。

Answer 1

您需要两段可以应用不同样式的文本。

要输入一次，您可以使用数据属性并通过::before 和::after 生成文本。 (可能的问题，HTML 中缺少文本)

带有数据属性的示例(我认为这不是最好的，因为缺少文本)

h2 {
  display: grid;
  height: 100px;
}

[data-text]::before,
[data-text]::after {
  content: attr(data-text);
  margin: auto;
  grid-column: 1;
  grid-row: 1;
  z-index: 1;
  color: brown;
  text-shadow: 0 0 2px white, 0 0 2px white, 0 0 2px white;
}

::before {
  z-index: 0;
  transform: scale(2.5);
  opacity: 0.25
}

<h2 data-text=" My text to show"></h2>

另一个例子，你需要输入两次文本。

h2 {
  display: grid;
  height: 100px;
  justify-content: center;
  text-align: center;
  align-items: center;
  color: brown;
}

[data-text]::before {
  content: attr(data-text);
  position: absolute;
  grid-row: 1;
  grid-column: 1;
  left: 0;
  right: 0;
}

::before {
  z-index: 0;
  transform: scale(2.5);
  opacity: 0.25
}

<h2 data-text="My text to show">My text to show</h2>