Thick Underline Behind Text

Thick underline behind text

Another possibility:

p {
    font-size: 100px;
    font-family: arial;
}

span {
    padding: 0 10px;
    box-shadow: inset 0 -0.4em 0 0 magenta;
}

span:nth-child(2) {
    box-shadow: inset 0 -0.55em 0 0 magenta;
}

span:nth-child(3) {
    box-shadow: inset 0 -0.7em 0 0 magenta;
}

<p>
    <span>A</span><span>B</span><span>C</span>
</p>

Text Underline offset behind text

Some creative use of pseudo elements can help solve this.

.underline::after {
  content: '';
  background-color: yellow;
  height: 12px;
  display: block;
  position: absolute;
  width: 100%;
  left: 0;
  bottom: -8%;
  z-index: -1;
}
.underline {
  position: relative;
}
p {
  font-size: 1.5em;
}

<p>This is some text with a <span class="underline">special</span> underline</p>

How can we create underline text which covers 50% height of text?

The underline is actually a gradient background. It will be preserved after the line break:

body {  background-color: #ccc;}
span {  color: white;  font-size: 2em;  font-weight: bold;    background-image: linear-gradient(to bottom, transparent 50%, #7DE856 50%);  padding: .1em .4em;    -webkit-box-decoration-break: clone;  -o-box-decoration-break: clone;  box-decoration-break: clone;}

<span>Sample Text</span><br><br><span>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempore necessitatibus obcaecati nisi quaerat! Provident eum ducimus impedit adipisci sequi.</span>

Edit line thickness of CSS 'underline' attribute

Here is one way of achieving this :

HTML :

<h4>This is a heading</h4>

<h4><u>This is another heading</u></h4>

CSS :

u {
  text-decoration: none;
  border-bottom: 10px solid black;
}

Here is an example: http://jsfiddle.net/AQ9rL/

Underlining headings for multiple lines

You can use inverted box-shadow instead.

Like so -

h1{
    font-weight: 600;
    margin: 0 0 5px 0;
    position: relative;
    display: inline;
    box-shadow: inset 0 -3px #fff, inset 0 -12px lightblue;
}

<h1>Just a heading</h1>
<br>
<br>
<h1>A very very very very very very very very very very very very very very very very very very very very example long heading</h1>

How to increase the gap between text and underlining in CSS

No, but you could go with something like border-bottom: 1px solid #000 and padding-bottom: 3px.

If you want the same color of the "underline" (which in my example is a border), you just leave out the color declaration, i.e. border-bottom-width: 1px and border-bottom-style: solid.

For multiline, you can wrap you multiline texts in a span inside the element. E.g. <a href="#"><span>insert multiline texts here</span></a> then just add border-bottom and padding on the <span> - Demo

How to create CSS underline which partially covers the word?

You can use pseudo ::before or ::after elements for this:

body {
  background: black;
}

div span {
  /* This is important so the pseudo element can be place relative to the span element */
  position: relative;
  /* Need to set a z-index so the pseudo element has an index to place against */
  z-index: 1;
  font-size: 25px;
  color: white;
  font-family: sans-serif;
  font-weight: bold;
}

div span::after {
  position: absolute;
  content: '';
  /* Change the bottom value to move the underline element */
  bottom: 0;
  width: 100%;
  /* change the height to what you want */
  height: 15px;
  background: blue;
  display: block;
  /* move the pseudo element behind the it's span parent */
  z-index: -1;
}

<div>
  <span>Uniswap</span>
</div>

Thick Underline Behind Text