使用 CSS 标题后面的弱相同文本创建标题文本

Question

我真的不知道，怎么称呼它。我需要做这样的事情：

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

<h2>My Text</h2>

所以有我的标题文字，以及背景上的相同文字。应该是auto-upgradable，所以当有人改"KONTAKT"的时候，背景文字也会自动改成一样的。

理想情况下，是否可以仅使用 CSS?

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

Answer 1

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

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>

Answer 2

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

要输入一次，您可以使用数据属性并通过 ::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>

使用 CSS 标题后面的弱相同文本创建标题文本

Create heading text with a weak same text behind the heading with CSS

css

html-heading