Search code examples
htmlcssbackgroundhighlightstyling

Title that has responsive text should have a background per new line

I am looking for a CSS Guru that could possibly help me with the following issue:

I am developing a responsive card-container (amount of cards shown in one row depends of the browser screen size) with card components that contains a title. Now I have a certain design for my main section titles that is designed as follow:

Main title design example

The problem with the implementation of that same design inside the card component is that the text reacts responsively to the screen size and uses accordingly multiple lines. The thing is that with the same technique of coding I have the following output:

title example 2

What I would like to have as a result is that per new line that is responsively scaled there's the background with some space in between, instead of the block in the second image. So in the example above it would be like: "Want to get in" with the background and "touch" with a separate background of the same style.

Right now I am doing it with the following similar code throughout the app:

<div class="highlight-container">
  <span class="highlight">{{ section?.title?.key | translate | uppercase }}</span>
</div>

.highlight-container, .highlight, .subtitle, .subtitle-highlight {
  position: relative;
}

.highlight-container:before {
  content: " ";
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  background: $accent-color;
  z-index: -1;
  left: -30px;
  border-radius: 4px;
  padding: 0px 0px 0px 50px;
  box-shadow: 7px 7px rgba(255, 126, 103, 0.4);
}

But I would like to have a from scratch solution, since the title in this case is inside a card component that I am still designing anyway.

Solution

  • Here is an idea of solution without the radius (I will add another one later)

    h1 {
  --o: 7px; /* control the offset */

  max-width: 550px;
  font-size: 60px;
  font-weight: bold;
  font-family: sans-serif;
  text-align: center;
  margin: auto;
  color: #fff;
  text-shadow: 2px 2px #ab6053;
  
  /* the important code starts below */
  line-height: 1.3;
  padding-bottom: var(--o);
  background:
   conic-gradient(from 180deg at calc(100% - var(--o)) 40%,#ff7d67 25%,#0000 0)
    0 100%/100% 1.3em content-box,
   conic-gradient(from 90deg  at var(--o)              40%,#7b708a 25%,#0000 0)
    0 100%/100% 1.3em;
  clip-path: inset(var(--o) 0 0);
}


body {
  background: #0666a0;
}
    <h1>Some text taking many lines</h1>