2

I'm trying to achieve a marker strike through effect, as shown in the image below.

marker strike through effect

I've tried wrapping the text in two span elements. The inner one with negative top and bottom margins with the intent to reduce the height. The outer span sets the background and has positive margins to compensate for for the negative margins of the inner span. Similar to this question.

My current attempt doesn't function. This might be due to the fact that I'm using inline elements. However I don't want the whole block stroked but only the text inside the block.

.item .mark {
  background-color: #ffd100;
  margin: 13px 0;
}

.item .mark .text {
  margin: -13px 0;
}

/* irrelevant CSS */

.item {
  font-family: 'Open Sans', sans-serif;
  font-size: 10pt;
  text-align: center;
  width: 200px;
}

.item h1 {
  font-family: 'Permanent Marker', cursive;
  font-size: 18pt;
  font-weight: normal;
}

.item .button {
  width: 40px;
  height: 40px;
  line-height: 40px;
  margin: auto;
  font-size: 14pt;
  font-weight: bold;
  border: 2px solid black;
  border-radius: 40px;
}

.item .button:hover {
  background-color: #ffd100;
}

.item .button a {
  color: inherit;
  text-decoration: none;
}
<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>
    Jerky pastrami pork belly tongue bresaola. Flank t-bone tri-tip, leberkas
    ribeye salami shoulder ball tip. Capicola frankfurter salami venison
    turducken pig burgdoggen shankle drumstick tail fatback. Turkey pork ham
    ball tip jowl beef rump boudin.
  </p>
  <div class="button"><a href="#">GO</a></div>
</div>
3limin4t0r
  • 19,353
  • 2
  • 31
  • 52
  • Something like this? [https://jsfiddle.net/hmq7g8yc/](https://jsfiddle.net/hmq7g8yc/) – Sfili_81 Nov 15 '19 at 10:58
  • Isn't there a text-decoration for strikeout in CSS, and even the HTML-native and -tags? I don't know about the visual effects of these, though (I'm blind). – TimB Nov 15 '19 at 10:59
  • uhm ... I think the solution in the "already asked question" is not the optimal one for your specific case, now I cannot post the answer since the post is closed ;( – Duc Hong Nov 15 '19 at 11:02
  • @TimB Yes there is. It had more styling options than I expected, the following comes pretty close: `text-decoration: line-through #ffd100 0.4em;` but leaves the stroke in front of the text, whereas it should be behind. – 3limin4t0r Nov 15 '19 at 11:38

3 Answers3

4

The easiest way I can think of is to use a linear-gradient() as your background:

.item .mark {
  /* here we use the linear-gradient function: */
  background: linear-gradient(
    /* the direction of the gradient: */
    to bottom,
    /* the starting colour: */
    transparent,
    /* the colour continues, until the colour stop
       at 40%: */
    transparent 40%,
    /* the next colour, starting at the same point,
       so the colour change is abrupt rather than a
       smooth gradient: */
    #ff0 40%,
    /* the colour continues until the next colour-stop: */
    #ff0 60%,
    /* at the next colour stop the colour changes again,
       this time back to transparent: */
    transparent 60%,
    /* and remains transparent until the end of the linear-gradient: */
    transparent);
  margin: 13px 0;
  padding: 0 0.5em;
}


.item .mark {
  background: linear-gradient(
    to bottom,
    transparent,
    transparent 40%,
    #ff0 40%,
    #ff0 60%,
    transparent 60%,
    transparent);
  /* unchanged: */
  margin: 13px 0;
  /* padding set to 0.5em on the left and right sides,
     in order that the 'strike-through' extends beyond
     the side of the text: */
  padding: 0 0.5em;
}


/* most CSS removed for brevity */

.item {
  font-family: 'Open Sans', sans-serif;
  font-size: 10pt;
  text-align: center;
  width: 200px;
}

.item h1 {
  font-family: 'Permanent Marker', cursive;
  font-size: 18pt;
  font-weight: normal;
}
<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">Foo</span></h1>
  <!-- removed for brevity -->
</div>

References:

3limin4t0r
  • 19,353
  • 2
  • 31
  • 52
David Thomas
  • 249,100
  • 51
  • 377
  • 410
  • 1
    This is probably the cleanest solution out of the bunch. Too bad multi position stops isn't yet widely supported. `linear-gradient(to bottom, transparent 40%, #ffd100 40% 60%, transparent 60%)` is a lot shorter. – 3limin4t0r Nov 15 '19 at 12:29
1

You could use borders in order to achieve the striking effect.

You can change the width of the striking by changing the width of border-bottom: 0.25em solid #ffd100;

.item .mark {
  position: relative;
}
.item .mark::after {
  border-bottom: 0.25em solid #ffd100;
  content: "";
  left: 0;
  margin-top: calc(0.125em / 2 * -1);
  position: absolute;
  right: 0;
  top: 50%;
  z-index: -1000;
}

/* irrelevant CSS */

.item {
  font-family: 'Open Sans', sans-serif;
  font-size: 10pt;
  text-align: center;
  width: 200px;
}

.item h1 {
  font-family: 'Permanent Marker', cursive;
  font-size: 18pt;
  font-weight: normal;
}

.item .button {
  width: 40px;
  height: 40px;
  line-height: 40px;
  margin: auto;
  font-size: 14pt;
  font-weight: bold;
  border: 2px solid black;
  border-radius: 40px;
}

.item .button:hover {
  background-color: #ffd100;
}

.item .button a {
  color: inherit;
  text-decoration: none;
}
<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>
    Jerky pastrami pork belly tongue bresaola. Flank t-bone tri-tip, leberkas
    ribeye salami shoulder ball tip. Capicola frankfurter salami venison
    turducken pig burgdoggen shankle drumstick tail fatback. Turkey pork ham
    ball tip jowl beef rump boudin.
  </p>
  <div class="button"><a href="#">GO</a></div>
</div>
3limin4t0r
  • 19,353
  • 2
  • 31
  • 52
dmuensterer
  • 1,875
  • 11
  • 26
  • 1
    This is pretty close. The stroke has to be behind the text, not in front of it. But setting the suggested styling on `.item .mark::before` instead and adding `.item .mark { position: relative; }` seems to move the stroke behind the text. – 3limin4t0r Nov 15 '19 at 11:14
  • Instead you can also set the `z-index` of the `::after` pseudo-class accordingly. I edited my post as to the requirements. – dmuensterer Nov 15 '19 at 11:16
1

Click on the GO Button, you will see the animated marker strike

$("#go").click(function() {
  $('.item h1').toggleClass('widthh');
});
.item .mark {
  background-color: #ffd100;
  margin: 13px 0;
}

.item .mark .text {
  margin: -13px 0;
}

.item {
  font-family: 'Open Sans', sans-serif;
  font-size: 10pt;
  text-align: center;
  width: 200px;
}

.item .button {
  width: 40px;
  height: 40px;
  line-height: 40px;
  margin: auto;
  font-size: 14pt;
  font-weight: bold;
  border: 2px solid black;
  border-radius: 40px;
}

.item .button:hover {
  background-color: #ffd100;
}

.item .button a {
  color: inherit;
  text-decoration: none;
}


/* irelevant CSS */



.item h1 {
  font-family: 'Permanent Marker', cursive;
  font-size: 18pt;
  font-weight: normal;
  position: relative;
  z-index: 0;
  display: inline-block;
}
.item h1:before {
  content: '';
  position: absolute;
  width: 0;
  left: -10px;
  height: 10px;
  top: 50%;
  background: #ffb300;
  transform: translateY(-35%) rotate(-3deg);
  z-index: -1;
  transform-origin: left;
  transition: .3s all ease;
}

.item h1.widthh:before {
  width: calc(100% + 20px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|Permanent+Marker&display=swap" rel="stylesheet">

<div class="item">
  <h1 class="widthh">Foo</h1>
  <p>
    Jerky pastrami pork belly tongue bresaola
  </p>
  <div class="button"><a href="#" id="go">GO</a></div>
</div>

I only add pseudo element

Anmol Juneja
  • 325
  • 1
  • 9