Html Question posted in
Some basic documentation can be found here.

Html – Text decoration span over <span>s

I have a <ul> element, with list items as such:

<ul>
    <li class="list__item">
        <span class="list__quantity">3</span>
        <span class="list__unit">Kg</span>
        <span class="list__name">Tomatos</span>
     </li>
     <li class="list__item">
        <span class="list__quantity">3</span>
        <span class="list__unit">Kg</span>
        <span class="list__name">Cucmbers</span>
      </li>
</ul>

I want to have a text-decoration: line-through that spans across an entire list item. I’ve tried:


.list__item {
    display: flex;
    margin-bottom: 10px;
    width: 100%;
    text-decoration: line-through;
}

But my list looks like this:

enter image description here

I want the line to be continuous, spanning the whole list item.

Is that possible?

Tags:

3

Answers


  1. 0

    Don’t use line-through, use a pseudo-element positioned over the spans

    .list__item {
  display: flex;
  margin-bottom: 10px;
  /*     text-decoration: line-through; */
  position: relative;
  width: min-content;
}

.list__item::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: red;
}

span {
  padding: 0 0.25em;
}
    <ul>
  <li class="list__item">
    <span class="list__quantity">3</span>
    <span class="list__unit">Kg</span>
    <span class="list__name">Tomatos</span>
  </li>
  <li class="list__item">
    <span class="list__quantity">3</span>
    <span class="list__unit">Kg</span>
    <span class="list__name">Cucmbers</span>
  </li>
</ul>

    removed image

    Login or Signup to reply.
  2. 0

    You could use ::before pseudo element for this. Only drawback is you will have to limit the width of li elements to max-content or you can set the values manually for width of the line.

    Alternatively you can use the psuedo element on the span itself. That will require some hit and trial to get the exact width and position as per your entire list-data. First method is a bit easier and minimalist but you can go for second one if you need the li to be width:100%

    .list__item {
  position: relative;
  display: flex;
  margin-bottom: 10px;
  width: max-content;
}

.list__item::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 100%;
  height: 2px;
  background: black;
}
    <ul>
  <li class="list__item">
    <span class="list__quantity">3</span>
    <span class="list__unit">Kg</span>
    <span class="list__name">Tomatos</span>
  </li>
  <li class="list__item">
    <span class="list__quantity">3</span>
    <span class="list__unit">Kg</span>
    <span class="list__name">Cucmbers</span>
  </li>
</ul>
    Login or Signup to reply.
  3. 0

    You can try below. This adds whitespace on right side of span except the last span. Note you have to remove existing padding/margin from the span.

    screenshot

    <html>

<head>
    <style>
        .list__item {
            display: flex;
            margin-bottom: 10px;
            width: 100%;
            text-decoration: line-through;
        }

        .list__item span:not(:last-child):after {
            content: "0a00a0";
            /* this adds 8px space on right side. add more 0a0 if required*/
        }
    </style>
</head>

<body>
    <ul>
        <li class="list__item">
            <span class="list__quantity">3</span>
            <span class="list__unit">Kg</span>
            <span class="list__name">Tomatos</span>
        </li>
        <li class="list__item">
            <span class="list__quantity">3</span>
            <span class="list__unit">Kg</span>
            <span class="list__name">Cucmbers</span>
        </li>
    </ul>
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search