I have a problem where I can't adjust it to work responsively and for different text lengths so that the line is always attached to the last word of my h2.

This is how this look on short text and how it should look like:

On mobile when text is longer its look like this:

I'm trying something like this:

h2 {
  font-size: 56px;
  font-weight: 700;
  line-height: 67.2px;
  color: #1f1f23;
  text-transform: uppercase;
  width: fit-content;
  position: relative;
  display: inline-block;
}

h2:after {
  content: "";
  position: absolute;
  bottom: 0px;
  right: -15px;
  width: 50%;
  height: 24px;
  background-color: #ff3300;
}

<h2><span class="text relative">Newsy</span></h2>

I have a problem where I can't adjust it to work responsively and for different text lengths so that the line is always attached to the last word of my h2.

This is how this look on short text and how it should look like:

On mobile when text is longer its look like this:

I'm trying something like this:

h2 {
  font-size: 56px;
  font-weight: 700;
  line-height: 67.2px;
  color: #1f1f23;
  text-transform: uppercase;
  width: fit-content;
  position: relative;
  display: inline-block;
}

h2:after {
  content: "";
  position: absolute;
  bottom: 0px;
  right: -15px;
  width: 50%;
  height: 24px;
  background-color: #ff3300;
}

<h2><span class="text relative">Newsy</span></h2>

• html
• css
• tailwind-css

• 2 This can't work, when you position it relative to a block or inline-block element. Apply it to the inline span element instead. – C3roe Commented Jan 20 at 14:39

2 Answers 2

A simple gradient combined with padding can do it

h2 {
  font-size: 56px;
  font-weight: 700;
  line-height: 67.2px;
  color: #1f1f23;
  text-transform: uppercase;
}
h2 span {
  background: conic-gradient(pink 0 0) 100% 100%/3em .7em no-repeat;
  /* width = 3em and height = .7em */
  padding: 0 .5em .1em 0;
}

<h2>Some text and <span class="text">Newsy</span></h2>

You can do it with javascript, this is an example (I used jquery):

$(document).ready(function () {
    let h2El = $("h2");
    $(h2El).each(function (index, element) {
        let h2Text = $(this).text();
        let h2Words = h2Text.split(" ");
        h2Words[h2Words.length-1] = "<span>"+h2Words[h2Words.length-1]+"</span>";
    
        let h2wordsHighlighted = h2Words.join(" ");
        $(this).html(h2wordsHighlighted);
    });
});

h2{
    font-size: 56px;
    font-weight: 700;
    line-height: 67.2px;
    color: #1f1f23;
    text-transform: uppercase;
    width: fit-content;
    position: relative;
    display: inline-block;
}
h2 > span{
    position: relative;
}
h2 > span::after{
    content: "";
    position: absolute;
    bottom: 0px;
    right: 0;
    left: 0;
    height: 24px;
    background-color: #ff3300;
    z-index: -1;
}

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<h2>Lorem ipsum dolor, sit amet consectetur</h2>