I'm looking for an alternative way to achieve the same visual effect as a line or an SVG that follows the text
03:45 30 Mar 2026

I'm looking for another way to achieve the same effect, but without using a white background to hide the line that runs beneath the SVG. Otherwise, I can't incorporate it when there's a background image with different colors-it makes the white square stand out, and that's not what I want.

Requirements:

  • The line must always follow the text.

  • The line and the SVG must always be together and must always follow the last word.

  • If the text wraps to two lines, the line break and the SVG should follow on the second line, etc.

If there's no way to do it with CSS, it's okay to use a little JavaScript.

Thank you community.

.title {
  overflow: hidden;
  position: relative;
  font-weight: bold;
  padding-right: 62px;
}

.title:after {
  content: '';
  display: inline-block;
  height: 3px;
  translate: 12px calc(50% - 0.5lh + 1.5px);
  vertical-align: bottom;
  border-image: conic-gradient(#f00 0 0) 0 1/0 100vw 0 0/0 100vw 0 0;
}

.svg {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 42px;
  height: 1lh;
  transform: translateY(calc(50% - 0.5lh));
  background-color: #fff; /* I wan't remove this line to maintain transparency. */
  z-index: 1;
}
 

  How can you ensure that the line follows the text in all circumstances?

html css