如何保持動畫鏈接下划線效果但使整個區域可點擊（沒有 onclick 也沒有額外的 div）

Question

我正在使用一種技術來創建動畫鏈接效果，其中下划線慢慢形成（我不記得我最初看到了什么技術，但我從我之前使用的另一個應用程序中復制了它）。

它在大多數情況下運行良好，尤其是當鏈接作為文本的一部分嵌入時，但在這種情況下，我希望它成為標題導航的一部分。

因此，對於一個我希望鏈接可點擊區域是一個包含填充的塊，而不僅僅是<a>通常所做的一段文本。

我正在嘗試在不更改 HTML 本身的情況下執行此操作，並且僅通過 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>

這基本上與使用 onclick 制作可點擊鏈接但沒有 href=#?

Answer 1

將padding移動到a並更改:after樣式：

.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;
    }
  }