text enclosed between top and bottom borders with CSS

Question

I want to replicate the effect in the photo, with pink neon borders above and below, and the text enclosed between them. How can I achieve this with CSS? I've tried, but I can't get the same effect

Thank you

Answer 1

The simplest would be to use an SVG shape with filter: drop-shadow().
Here's an example with a similar SVG shape with a flickery neon animation

body {
  background: #111;
  font: 1rem/1.4 system-ui;
}

#neon path {
  stroke: #ffe9ff;
  stroke-linecap: round;
  stroke-width: 8;
  fill: none;
  animation: neon 0.01s alternate infinite;
  filter: drop-shadow(0 0 3px hsl(280 90% 60%)) drop-shadow(0 0 5px hsl(280 90% 50%));
}

h1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  align-items: center;
  font-size: 3rem;
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 50px hsla(280 90% 70% / 0.5);

  & span {
    font-size: 1.86em;
  }

  & svg {
    width: 4em;

    &~svg {
      rotate: 180deg;
    }

  }
}

@keyframes neon {
  80% {
    filter: drop-shadow(0 0 5px hsl(300 90% 50%)) drop-shadow(0 0 8px hsl(300 90% 50%));
  }
}

<svg style="display:none;">
  <defs>
    <symbol id="neon">
      <path d="M15,90 15,35 Q15,15 35,15 L 165,15 Q185,15 185,35 L 185,90"></path>
    </symbol>
  </defs>
</svg>

<h1>
  <svg viewBox="0 0 200 100"><use href="#neon" /></svg>
  6 Giugno 2024<br>
  <span>Milano</span>
  <svg viewBox="0 0 200 100"><use href="#neon" /></svg>
</h1>