Creating a bottom border that is the length of the bottom row of child spans

Question

TL:DR - I have a set of spans that reverse wrap in a container div and I need a "border line" that is the width of only the bottom set of spans. (The solution can use any combination of css, html, js)

To give a little context, I am using these span boxes that get made with some JS so I can have reverse wrap and fill in the bottom lines first.

The JS in question:

x = document.getElementsByClassName("ipsumNumber");
for (i = 0; i < x.length; i++) {
  const wrapText = x[i];
  wrapText.innerHTML = wrapText.textContent
    .split(" ")
    .map(function (y) {
      return "" + y + "";
    })
    .reverse()
    .join("");
}

I want to have a bottom bar that is an arbitrary number of pixels wider then the bottom line of spans. My current tactic is to use a mass of @media in a css file.

Somthing like this:

.ipsumHolder {
    vertical-align: middle;
    width: fit-content;
    height: fit-content;
    display: flex;
    padding-left: 0.3em;
    position: absolute;
}
.ipsum::after {
    content: "";
    position: absolute;
    margin-bottom: -5.5px;
    margin-right: 0.3em;
    padding-left: 0.3em;
    padding-right: 0.3em;
    border-bottom: 10px solid blue;
    width: 80%;
    color: transparent;
    bottom: 0;
}

p.ipsumNumber{
    display: flex;
    flex-wrap: wrap-reverse;
    flex-direction: row-reverse;
    justify-content: center;
}

@media (max-width: 852px) {
    #ipsum::after {
        line-height: 2em;
        content: "Neque porro quisquam";
    }
}

@media (max-width: 666px) {
    #ipsum::after {
        line-height: 2em;
        content: "Neque porro quisquam est qui dolorem";
    }
}

@media (max-width: 600px) {
    #ipsum::after {
        line-height: 1em;
        content: "quisquam est qui dolorem";
    }
}

@media (max-width: 428px) {
    #ipsum::after {
        line-height: 3em;
        content: "qui dolorem";
    }
}

Perfect fit:

Non-perfect fit (last line is the largest):

Span boxes:


  
    ipsumdoloremquiestquisquamporroNeque

This is horrible and disgusting (not to mention there are about 4 of these text boxes per page and I would have to do this for 4 different files)!

I know there must be a better way to this, but i just can't think of it. I have not found a way to do "width: 100%;" and only fill for the bottom row.

user_8620333 · Answer

Here is a CSS-only hacky solution. Resize the container to notice the responsiveness

.ipsumNumber {
  display: flex;
  justify-content: center;
  flex-wrap: wrap-reverse;
  font-size: 25px;
  font-weight: bold;
  color: #fff;
  gap: 5px; /* the gap */
}
.ipsumHolder {
  width: 300px;
  overflow: hidden; /* we need to hide the overflow */
  resize: horizontal;
  background: #000; /* main background */
}
.ipsumNumber span {
  position: relative;
}
.ipsumNumber span:before,
.ipsumNumber span:after{
  content: "";
  position: absolute;
  height: 5px;
}
/* your underline */
.ipsumNumber span:before {
  inset: 100% -5px auto; /* 5px same as gap, you can use bigger if you want but not smaller  */
  background: blue;
}
/* the hack that will hide the non-needed unreline */
.ipsumNumber span:after {
  inset: auto -200vmax 100%; /* 200vmax is a very big value */
  background: #000; /* same as main background */
  z-index: 1;
}


  
    ipsumdoloremquiestquisquamporroNeque

Creating a bottom border that is the length of the bottom row of child spans

1 Answers