How make text-decoration: underline with 2px padding?

后端 未结 10 2319
無奈伤痛
無奈伤痛 2021-02-07 02:19

I like an obedient frotend developer must create underline with 2px padding instead of 1px by default. Is exist simple solution for this?

PS Yeahh guys, I know about div

10条回答
  •  囚心锁ツ
    2021-02-07 02:40

    I used @jake's solution, but it gave me trouble with the horizontal alignment.

    My nav links are flex row, center aligned and his solution caused the element to shift upwards in order to stay horizontally center-aligned.

    I fixed it by doing this:

    a.nav_link-active {
      color: $e1-red;
      margin-top: 3.7rem;
    }
    a.nav_link-active:visited {
      color: $e1-red;
    }
    a.nav_link-active:after {
      content: '';
      margin-top: 3.3rem;      // margin and height should
      height: 0.4rem;          // add up to active link margin
      background: $e1-red;
      display: block;
    }
    

    This will maintain the horizontal alignment for you.

提交回复
热议问题