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>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?
>Solution :
.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>