html - 如何创建标记删除线效果？

Question

我正在尝试实现标记删除线效果，如下图所示。

我试过将文本包装在两个 span 元素中。内部的顶部和底部边距为负，目的是降低高度。外部 span 设置背景并具有正边距以补偿内部 span 的负边距。类似于 this问题。

我当前的尝试不起作用。这可能是因为我使用的是内联元素。但是，我不希望整个 block 都被抚摸，而只是 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>

Answer 1

我能想到的最简单的方法是使用 linear-gradient() 作为背景:

.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>

引用资料:

• background .
• linear-gradient() .