CODEWITHSUNDEEP
htmlcss
user15608655
user15608655

Reputation:

How to display mutiple underline color by css (instead of one color)

I would like to display mutiple underline color to a certain text

I know that text-decoration-color is to set underline color.

But I want to have sth like below

enter image description here

Upvotes: 2

Views: 165

Answers (5)

Diego D
Diego D

Reputation: 8196

This is a solution for having multiple borders using box-shadow and text-decoration at the same time. The regular border was added as the first underline crossing the font baseline with an offset defined by text-underline-offset

https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-offset

https://caniuse.com/?search=text-underline-offset

.paragraph{
  font-size: 20px;
  font-family: arial;
  color: #2C019D;
  text-align: center;
  display: inline-block;
  line-height: 1.5em;
}

.highlight{
  box-shadow:
    0px 2px white,    
    0px 10px orange;
    
  text-decoration: underline solid red 2px;
  text-underline-offset: 2px;    
}

.highlight::after{
  content: '\A';
  white-space: pre;
}
<span class="paragraph">I'd far rather be <span class="highlight">happy than right</span> any day</span>

Upvotes: 4

Ae Leung
Ae Leung

Reputation: 378

You may try to apply different span with different style

.doubleHightlight{
box-shadow:
    0px 2px yellow,    
    0px 10px orange;
}

.singleHightlight{
box-shadow:
    0px 2px yellow, 
}

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 274097

Using outline and clip-path

span {
  text-decoration: underline; /* first underline */
  outline: 5px solid orange; /* second underline */
  outline-offset: 2px; /* control the gap */
  clip-path: inset(0 0 -100vmax);
}

p {
  font-size: 30px;
  font-family: sans-serif;
  line-height: 1.4;
}
<p>
  <span>Happy than right</span> is to set underline color.
</p>

Also with gradient to support multi-line of text:

span {
  text-decoration: underline; 
  background: linear-gradient(0deg,orange 5px,#0000 0);
  padding-bottom: 7px; /* control the gap */
}

p {
  font-size: 30px;
  font-family: sans-serif;
  line-height: 1.4;
}
<p>
  <span>Happy than right is to set underline color with multiline of text</span>
</p>

Upvotes: 2

Jaswinder Kaur
Jaswinder Kaur

Reputation: 1634

You can make a pseudo element by using :after

span {
  text-decoration: underline;
  text-decoration-color: red;
  text-decoration-thickness: 2px;
  position: relative;
}
span::after {
  content: "";
  width: 100%;
  display: block;
  position: absolute;
  height: 4px;
  background: orange;
  bottom: -6px;
  border-radius: 10px;
}
<p>
<span>Text-decoration</span> is to set underline color.
   
</p>

Upvotes: 4

WhiteFang
WhiteFang

Reputation: 199

You can surround text with a span and give it a border, like so:

<span>happy than right<span>

span {
    text-decoration: underline;
    text-decoration-color: red;
    border-bottom: 1px solid orange;
}

Upvotes: -2

Related Questions