I would like to have something similar to this:

but with the text over the question mark (the text should strike through the middle of the question mark)

I've been trying to do it myself but I can't really figure out how to do it.

Here's my result so far:

.quiz-question {
    position: relative;
    font-size: 4rem;
}

.quiz-question::before {
   content: "?";
   font-size: 7rem;
   position: absolute;
   top: -40%;
   left: 0;
   bottom: 0;
   right: 0;
   z-index: -1;
   overflow: hidden;
   text-align: center;
}

<div class="quiz-question">
            This is a test text.
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

The problem is that the background "?" is not centered horizontally and also that it is centered vertically because of the hard-coded top: -40%.

How can I fix these problems?

CodePudding user response：

.quiz-question {
  position: relative;
  font-size: 4rem;
  
  /* Added by me */
  display: inline-block;
}

.quiz-question::before {
  content: "?";
  font-size: 7rem;
  position: absolute;
  
  /* Added by me */
  top: 50%;
  transform: translateY(-50%);
  /* bottom: 0; */
  
  left: 0;
  right: 0;
  z-index: -1;
  overflow: hidden;
  text-align: center;
}

<div class="quiz-question">
  This is a test text.
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You can set for before: left top right bottom 0, display flex, align items center, justify-content center