Не могу понять как сделать так, чтобы линия добавляемая через css заканчивалась там, где закачивается текст тега h3

Question

Есть код на html:

.red__line__left {
  left: 0;
  width: 50vw;
  background-image: url('../image/red__line.svg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position-x: left;
  z-index: -1;
  transform: translateY(27px);
  position: absolute;
  padding-top: 8px;
}

<div class="container tth">
  <div class="row">
    <div class="col-md-auto tth__os" id="dynamicH3">
      <div class="red__line__left red__line__left__os"></div>
      <h3>операционная система:</h3>
    </div>
  </div>
</div>

В класс .red__line__left с помощью CSS добавляется картинка линии

Эта линия начинается от края экрана и заканчивается на его середине.

Но нужно, чтобы эта линия так же начиналась от края экрана, но закачивалась там, где заканчивается текст тега <h3>.

Не могу придумать то, как это сделать.

Примеры:

Сейчас получается так:

А надо так:

Answer 1

Решил проблему - добавил изменения при изменении зума, не знаю насколько это корректно.

html изменился следующим образом:

<div class="container tth">
        <div class="row">
                <div class="col-md-auto tth__cp">
                    <div class="red__line__left2"></div>
                    <h3 id="textContainer2">процессор:</h3>

применяемые стили:

#textContainer2, #textContainer3 {
    display: inline-block;
    max-width: 500px;
  }

.red__line__left1,
.red__line__left2,
.red__line__left3 {
    left: 0;
    width: 0;
    background-image: url('../image/red__line.svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: left;
    z-index: -1;
    transform: translateY(27px);
    position: absolute;
    padding-top: 8px;
}

Само решение через js:

document.addEventListener("DOMContentLoaded", function () {
    function getBlockInfo(id) {
        const element = document.getElementById(id);
        return {
            offsetLeft: element.getBoundingClientRect().left,
            width: element.offsetWidth
        };
    }

    const blocks = [
        { id: 'textContainer1' },
        { id: 'textContainer2' },
        { id: 'textContainer3' }
    ];

    function updateBlocks() {
        blocks.forEach(block => {
            const info = getBlockInfo(block.id);
            const distanceFromLeftEdge = info.offsetLeft;
            const totalWidth = distanceFromLeftEdge + info.width;

            document.querySelector(`.red__line__left${block.id.split('textContainer')[1]}`).style.width = `${totalWidth}px`;
        });
    }

    updateBlocks();

    window.addEventListener('resize', function () {
        if (window.innerWidth!== window.screen.width || window.innerHeight!== window.screen.height) {
            updateBlocks();
        }
        
        if (window.devicePixelRatio!== screen.devicePixelRatio) {
            updateBlocks();
        }
    });
});

Answer 2

Я б сделал с использованием инлайн-блока в конце текста, чтобы позиция была в нужно с нужного места.
А линию сделал через псевдо-элемент.

body {
  background-color: #333;
  color: #fff;
}

.main {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 50px;
  width: 400px;
  margin: 0 auto;
}

.title {
  text-transform: uppercase;
  margin: 0;
}

.title .line {
  display: inline-block;
  position: relative;
}

.title .line::before {
  content: '';
  display: block;
  width: 100vw;
  height: 6px;
  background-color: red;
  position: absolute;
  right: 0;
  z-index: -1;
}

<div class="main">
  <h2 class="title">Операционная система:<span class="line"></span></h2>
  <h2 class="title">Процессор:<span class="line"></span></h2>
  <h2 class="title">Программы:<span class="line"></span></h2>
  <h2 class="title">Текст<br>в несколько строк:<span class="line"></span></h2>
  <h2 class="title">Текст в несколько<br>строк:<span class="line"></span></h2>
</div>

БЛОГ НА HUSL

Не могу понять как сделать так, чтобы линия добавляемая через css заканчивалась там, где закачивается текст тега h3

Ответы (2 шт):