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

Html – The effect of a line sticking to the text

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:

enter image description here

On mobile when text is longer its look like this:

enter image description here

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>
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search