How would I get this CSS design under text? (Shaded Rectangle under text)?-CodePudding

Would like to know how I can get this design using CSS? It is kind of like a burgundy CSS under an H1 header

Closest I can get is something like:

h1 {
  font-size: 48px;
  color: #16343E;
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  display: inline;
  background-image: linear-gradient(#fff 60%, #863034 55%);
}


    <h1>Welcome</h1>

CodePudding user response：

I've tried to approach it as best as I could.

The HTML:

<h1>WELCOME</h1>

The CSS:

h1 {
  font-family:helvetica;
  display: inline-block;
  border-bottom: 30px solid #A66;
  line-height: 0;
  padding: 0 15px;
}

See:

CodePudding user response：

Here is another option with pseudo element:

h1 {
  display: inline-block;
  padding: 0 3rem;
  text-transform: uppercase;
  position: relative;
}

h1::after {
  content: '';
  left: 0;
  bottom: -10px;
  position: absolute;
  width: 100%;
  height: 30px;
  background: tomato;
  z-index: -1;
}

CodePudding user response：

Html

h1{
 position: relative;
}
.under-lined-color{
 position: absolute;
 bottom: 2px; //Change this accordingly
}

<h1>WELCOME</h1>
<span ></span>