CSS content with delay

Question

I'm using CSS content property to add content before an html tag.

span::before {
    content: 'content that needs a delay';
}

<span></span>

Is there a way to delay the visibility of the content (with CSS)?

Answer 1

span::before {
    content: 'content that needs a delay';
     margin-top: 25px;
    font-size: 21px;
    text-align: center;
    animation: fadein 4s;
}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

<span></span>

Answer 2

Try css-animation

span::before {
  content: 'content that needs a delay';
  opacity: 0;
  animation: 2s fadeIn;
  animation-fill-mode: forwards;
  transition: opacity 1.5s;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<span></span>