Search code examples
csshtml-heading

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

I really don't know, how to call that. I need to do something like this: enter image description here

h2 {
text-shadow: 5px 5px #000;
}
<h2>My Text</h2>

So there is my heading text, and the same text on background. It should be auto-upgradable, so when someone will change "KONTAKT", the background text will automatically change too to be the same.

Ideally, if is possible to do that only with CSS?

I thought, this could be done with text-shadow property, but it seems not.

Solution

  • You need two pieces of text to which you can apply different style.

    to type it once, you can use a data-attribute and generate the text via ::before and :: after. (possible issue, text is missing from HTML)

    example with data attributes (not the best in my opinion, for the text missing)

    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>

    another exampe , where you need to type twice the text .

    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>