I'm attempting to create a strikethrough effect for a marker, just like the one shown in the image below.
In my efforts to achieve this effect, I have tried wrapping the text within two span elements. The inner span has negative margins to reduce the height, while the outer span sets the background with positive margins to compensate. You can see a similar approach in this question.
Unfortunately, my current strategy is not functioning as expected. It seems that using inline elements may be causing issues. I specifically want only the text inside the block to have the strikethrough effect, not the entire block itself.
The relevant CSS code snippet is provided below for reference:
.item .mark {
background-color: #ffd100;
margin: 13px 0;
}
.item .mark .text {
margin: -13px 0;
}
/* other CSS styles */
Additional HTML content for context:
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|Permanent+Marker&display=swap" rel="stylesheet">
<div class="item">
<h1><span class="mark"><span class="text">Foo</span></span></h1>
<p>
[Text content here]
</p>
<div class="button"><a href="#">GO</a></div>
</div>