Forum Documentation Showcase Pricing Learn more

¿How do you change the Underline Style?


#1

It seems that I can`t modify the style of the Underline, for example when a text is hovered. Or at least I did’t find the option to change the color, the line height, etc.

16


#2

Set underline when this text is visible.
To change color use css

  text-decoration: underline;
  text-decoration-color: red;

#3

i tried text-underline-position
but it runs slow for some reason. Everything else works fine, you can set a condition on html element when ‘whatever text’ is hovered, or you can use pseudo :hover class.



#4

Thank you @beau,

The thing is that while I was searching on StackOverflow in looking for this amazing underline animation, 20190210_121746

I’ve realized that in Style we can’t change the underline style when a text is hovered (In a native way from bubble).

So right now i try to replicate the css transition (from above example) with this code from StackOverflow:

.un {
  display: inline-block;
}

.un:after {
  content: '';
  width: 0px;
  height: 1px;
  display: block;
  background: black;
  transition: 300ms;
}

.un:hover:after {
  width: 100%;
}
<span class="un">Underlined Text - Or to be underlined</span>

#5

example
Yeah it works, same principle, replace “.un” with whatever id you have on whatever text.


#6

I did that :), I am stuck at reversing the transition after the hover (i want the line to go out to the right after the hover)


#7

oh yeah youre right, i copied it exactly, maybe they missed something in their code


#8

try this


#9

Awesome, thanks :slight_smile: