如何保持动画链接下划线效果但使整个区域可点击（没有 onclick 也没有额外的 div）

Question

I am using a technique to create an animated link effect where the underline slowly forms (I can't remember what I saw the technique originally, but I copied it from another app I worked on before).

It works well for the most part especially if the link is embedded as part of the text, but in this case I want it part of the header navigation.

So for one I want the link clickable area to be a block including the padding not just a piece of text which <a> normally does.

I am trying to do it without changing the HTML itself and only do it through CSS.

https://codepen.io/trajano/pen/mdyYpdv

 .page-header { width: 1080px; height: 94px; display: flex; border-bottom: 1px solid red; align-items: center; $link-color: rgba(0, 0, 0, 0.6); $link-hover-color: cyan; $selected-link-background: rgb(39, 153, 137); $selected-link-color: white; &__logo { img { width: 94px; height: 94px; } margin-right: auto; } &__selector { margin-left: 1rem; padding: 1rem; position: relative; display: inline-block; } &__selector--dropdown { display: none; position: absolute; background-color: #f9f9f9; z-index: 1; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); a { color: black; padding: 12px 16px; text-decoration: none; display: block; &:hover { background-color: #f1f1f1; } } } &__selector:hover { background: red; } &__selector--dropdown:hover { display: block; } &__selector:hover &__selector--dropdown { display: block; } .page-header-link { margin-left: 0.5rem; padding: 1rem; a { font-size: 14px; text-decoration: none; display: inline-block; position: relative; color: $link-color; &:after { content: ""; display: block; height: 2px; left: 50%; bottom: -4px; position: absolute; background-color: $link-color; transition: width 0.3s ease 0s, left 0.3s ease 0s; width: 0; } &:hover:after { width: 100%; left: 0; } } &:hover { background-color: $link-hover-color; } } .page-header-link__selected { background-color: $selected-link-background; a { font-size: 14px; text-decoration: none; display: inline-block; position: relative; color: $selected-link-color; &:after { content: ""; display: block; height: 2px; left: 50%; bottom: -4px; position: absolute; background-color: $selected-link-color; transition: width 0.3s ease 0s, left 0.3s ease 0s; width: 0; } &:hover:after { width: 100%; left: 0; } } } .page-header-selector { margin-left: 1rem; padding: 1rem; border: 1px solid black; display: inline-block; &__button { display: inline-block; min-width: 100%; min-height: 100%; } &__dropdown { display: none; position: absolute; z-index: 1; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); a { color: black; padding: 12px 16px; text-decoration: none; display: block; &:hover { background-color: #f1f1f1; } } } &:hover { background: red; .page-header-selector__dropdown { display: block; } } } }

 <div class="page-header"> <div class="page-header__logo"> <a href="#"> LOGO </a> </div> <div class="page-header-link"> <a href="#">2+2=5</a> </div> <div class="page-header-link"> <a href="#">YOLO</a> </div> <div class="page-header-link"> <a href="#">Foo Bar</a> </div> <div class="page-header-link page-header-link__selected"> <a href="#">Linkx</a> </div> <div class="page-header__selector"> <div class="page-header__selector--button">en</div> <div class="page-header__selector--dropdown"> <a href="#">Francais</a> <a href="#">Pirate</a> <a href="#">Chef</a> </div> </div> </div>

This is basically the opposite of Make a clickable link with onclick but without href=#?

Answer 1

moving the padding to the a and changing the :after styling a bit:

.page-header-link {
    margin-left: 0.5rem;

    a {
      font-size: 14px;
      text-decoration: none;
      display: block;
      position: relative;
      color: $link-color;
      padding: 1rem; /* <- */

      &:after {
        content: "";
        display: block;
        height: 2px;
        left: 50%;
        bottom: calc(1rem -4px); /* <- */
        position: absolute;
        background-color: $link-color;
        transition: width 0.3s ease 0s, left 0.3s ease 0s;
        width: 0;
      }
      &:hover:after {
        width: calc(100% - 2rem); /* <- */
        left: 1rem; /* <- */
      }
    }
    &:hover {
      background-color: $link-hover-color;
    }
  }