html - 划掉文字并注意容器的最大宽度

我想划掉一个span内的文本。现在我有这个

.content {}

.pending {}

.closed {
  position: relative;
}

.closed::before {
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  right: 0;
  border-top: 2px solid red;
}

<div class="content pending">
  this is a text about foo
</div>

<div class="content closed">
  this is a text about bar
</div>

如何将边框限制为当前内容？我只想划掉文本，而不是整个容器。
我不想使用<s>标记，因为我想设置线条的样式。
也许有完全不同的方法来解决这个问题？

最佳答案

如果在数据属性中添加内部文本，则以下是一种在某些情况下可以工作的黑客方法：

.content {}

.pending {}

.closed {
  position: relative;
}

.closed::before {
  position: absolute;
  content: attr(data-text);
  left: 0;
  top: 50%;
  border-top: 2px solid red;
  display: inline-block; /* makes sure ::before's width is determined by its content */
  color: rgba(0,0,0,0); /* makes the text invisible */
}

<div class="content pending">
  this is a text about foo
</div>

<div class="content closed" data-text="this is a text about bar">
  this is a text about bar
</div>

关于html - 划掉文字并注意容器的最大宽度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54218543/