CODEWITHSUNDEEP
javascriptunderlinetext-decorations
Mhoram
Mhoram

Reputation: 431

Setting the thickness of an underline (text decoration) in JavaScript

I am trying to find out how to set the thickness of an underline (the text decoration that happens when one hovers with the cursor) in JavaScript. Currently the text becomes underlined like this:

x.style.textDecoration = "underline";

and, "onmouseout", this is undone as follows: 

x.style.textDecoration = "none";

All the advice I've seen online so far has to do with formatting the bottom borders of tags. I am not trying to format a menu bar or any other element, but ordinary hyperlinks. I've tried it in various browsers, and the default underline looks fine in Firefox, but in Chrome, the line is hairline-thin, in contrast with the bold text it underlines.

Any advice on how to fix this is greatly appreciated.

Upvotes: 2

Views: 2048

Answers (3)

Roko C. Buljan
Roko C. Buljan

Reputation: 206048

CSS :hover should be used for such tasks

.x{
    /* default styles here */
}

.x:hover {
    /* HOVER default styles here */
}

if you want to be able to control the thickness of your "underline"
use border-bottom instead or box-shadow inset.

Border on whole padded Anchor

.x{
  display:         inline-block;
  color:           magenta;
  background:      #ddd;
  padding:         15px 15px 10px;
  text-decoration: none;
  border-bottom:   5px solid transparent;
  transition:      border-bottom 0.3s;
}

.x:hover{
  border-bottom-color: magenta;
}
<a class="x" href="#">Link 1</a>
<a class="x" href="#">Link 1</a>
<a class="x" href="#">Link 1</a>

On Anchor's text only using inner <span> and inset box-shadow

.x{
  display:         inline-block;
  color:           magenta;
  background:      #ddd;
  padding:         15px 15px 10px;
  text-decoration: none;
}

.x span{
  transition:      0.3s;
  box-shadow: inset 0 -2px 0 0 trasparent;
}

.x:hover span{
  box-shadow: inset 0 -2px 0 0 magenta;
}
<a class="x" href="#"><span>Link 1</span></a>
<a class="x" href="#"><span>Link 1</span></a>
<a class="x" href="#"><span>Link 1</span></a>

Using :after pseudo for more control

.x{
  position:        relative;
  color:           magenta;
  text-decoration: none;
}

.x:hover:after{
  content:    "";
  position:   absolute;
  left:       0;
  bottom:     -3px;      /* Control bottom position */
  width:      100%;
  height:     5px;       /* Set your desired thickness */
  background: magenta;
}
<a class="x" href="#">Link 1</a>
<a class="x" href="#">Link 1</a>
<a class="x" href="#">Link 1</a>

Upvotes: 3

guest271314
guest271314

Reputation: 1

Try using css :after pseudo element , :hover , font-family set to block ; adjust font-size to change thickness of line, top to to change position of line corresponding to text of element

div {
  width:24px;
}

div:after {
  position:absolute;
  top:-24px;
  content:"_";
  width:0px;
  color:#000;
  display:none;
  font-weight:bold;
  font-family:block;
  font-size:48px;
}

div:hover:after  {
   cursor:pointer;
   display:block;
}
<div>abc</div>

Upvotes: 0

user2182349
user2182349

Reputation: 9782

If you want to use JavaScript to update the border-bottom style attribute, you can use:

someTag.style.borderBottom="3px solid blue";

Note that the CSS border-bottom is borderBottom in JavaScript

Upvotes: 0

Related Questions