使用 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>

Answer 2

使用文本作为数据属性，然后你可以在每个伪元素中使用两次，轻松实现你想要的。

h2 {
  font-family:arial;
  position:relative;
  display:table;
  margin:auto;
  color:#bda000;
}

h2:before {
  content:attr(data-text);
  font-size:3em;
  opacity:0.25;
}
h2:after {
  content:attr(data-text);
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  left:0;
  right:0;
  text-align:center;
}

<h2 data-text="MY Text"></h2>

<h2 data-text="Another text"></h2>