Text that shows an underline on hover

Question

Can you underline a text on hover using css    Like the behavior of a link but not an actual link     you have the following text  Hello work when you hover your mouse over the text it underlines it using css    the text is not a link

User · Answer

You just need to specify text-decoration  underline  with pseudo-class  hover   HTML   lt span class  underline-on-hover  gt Hello world lt  span gt    CSS   underline-on-hover hover       text-decoration  underline      I have whipped up a working Code Pen Demo

User · Answer

lt span class  txt  gt Some Text lt  span gt    txt hover       text-decoration  underline

User · Answer

Fairly simple process I am using SCSS obviously but you don t have to as it s just CSS in the end    HTML   lt span class  menu  gt Menu lt  span gt    SCSS   menu       position  relative      text-decoration  none      font-weight  400      color  blue      transition  all  35s ease        amp   before           content              position  absolute          width  100           height  2px          bottom  0          left  0          background-color  yellow          visibility  hidden          -webkit-transform  scaleX 0           transform  scaleX 0           -webkit-transition  all 0 3s ease-in-out 0s          transition  all 0 3s ease-in-out 0s              amp  hover           color  yellow            amp   before               visibility  visible              -webkit-transform  scaleX 1               transform  scaleX 1

[html] Text that shows an underline on hover

HTML

CSS

Examples related to html

Examples related to css