cross out a text and pay attention to the maximum width of the container

Question

I would like to cross out a text within a span. Currently I have this

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

How can I limit the border to the current content? I only want to cross out the text, not the full container.

I don't want to use the <s> tag because I would like to style the line.

Maybe there is completely different way to solve this?

Try `display: table;` on `.closed`. See https://stackoverflow.com/questions/12708381/display-block-without-100-width for more. — maryisdead, Jan 16 '19 at 13:55

score 3 · Accepted Answer · answered Jan 16 '19 at 13:58

If you add the inner text in a data-attribute, the following would be a hackish approach that would work in certain scenarios:

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

Antoine Aïello · Answer 2 · 2019-01-16T14:13:47.960

1

Just set your .closed to display: inline; or 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>

edited Jan 16 '19 at 14:13

answered Jan 16 '19 at 14:03

Antoine Aïello

293
4
12

inline-block would be better – Temani Afif Jan 16 '19 at 14:07

score 1 · Answer 3 · answered Jan 16 '19 at 14:18

Here is a hacky way that rely on flexbox trick but you won't have transparency:

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

Or simply add a span inside if you can adjust the 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>

score 0 · Answer 4 · answered Jan 16 '19 at 13:56

0

If i understand correctly, adding:

width:fit-content;

should cross out the word

answered Jan 16 '19 at 13:56

JamesS

2,167
1
11
29

Currently the support for `fit-content` is quite limited: https://caniuse.com/#search=fit-content – connexo Jan 16 '19 at 13:58

cross out a text and pay attention to the maximum width of the container

4 Answers4