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

Question

我想删除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>标签，因为我想设置线条的样式。

也许有完全不同的方法来解决这个问题？

Answer 1

如果您将内部文本添加到数据属性中，则以下是一种在某些情况下可以使用的朴拙方法：

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

Answer 2

只需将您的.closed设置为display: inline;或display: inline-block;

.content {}

.pending {}

.closed {
  position: relative;
  display: inline-block;
}

.closed::before {
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  width: 100%;
  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>

Answer 3

这是一种依靠flexbox技巧的骇客方式，但您不会透明：

.closed {
  position: relative;
  display:flex;
}
/*fill the remaining space and hide the before*/
.closed::after {
  content:"";
  flex-grow:1;
  background:#fff;
  height:1em;
  z-index:1;
}
/**/
.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>

或者，如果可以调整HTML，只需在其中添加跨度即可：

.closed span{
  position: relative;
}

.closed span::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">
  <span>this is a text about bar</span>
</div>

Answer 4

如果我理解正确，请添加：

width:fit-content;

应该删除单词