主页 / coding / 问题 / 78939802
Accepted
Meek
Asked: 2024-09-02 17:35:49 +0800 CST

多行链接悬停动画和下划线偏移

  • 772

我有这个链接动画。我希望链接默认带有下划线，然后在悬停时添加动画下划线（下划线从左侧滑入）。这个示例完全符合我的要求，但在悬停时下划线离锚文本太近了 - 可能是因为我正在从文本装饰切换到背景。

那么，我怎样才能将悬停背景向下移动以匹配文本下划线偏移？添加background-position: left bottom -5px;到悬停不起作用。

a {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
   text-decoration: underline;
  text-underline-offset: 5px;
  position: relative;
  background: linear-gradient(#000, #000) left bottom no-repeat;
  background-size: 0% 1px;
  
}

a:hover {
  text-decoration: none;
  background-size: 100% 1px;
  transition: all 0.8s;
  /* background-position: left bottom -5px; */
}

body {
  line-height: 1.5;
}
<p>Bacon ipsum dolor amet picanha pork leberkas tail pig capicola. Fatback bacon rump biltong pastrami meatball cow. Meatloaf venison doner, flank swine pig beef bresaola corned beef capicola tri-tip bacon. Tri-tip rump ham short loin. Prosciutto porchetta corned beef rump. Pork chislic tri-tip short loin landjaeger andouille alcatra jerky sausage turkey. Chuck pastrami t-bone boudin doner pancetta pork chop flank pork shank spare ribs drumstick.</p>
<p>
<h3>Hover this link</h3>
  Andouille pork t-bone beef pig burgdoggen jowl. Shank short loin landjaeger rump alcatra pork belly jerky hamburger. <a href="">Pig cupim tongue meatball hamburger fatback flank prosciutto pork belly shank.</a>Chuck bresaola buffalo, short loin cow tongue tenderloin landjaeger beef cupim boudin shankle chislic t-bone. Sausage tenderloin hamburger leberkas kielbasa doner corned beef frankfurter tri-tip venison pastrami burgdoggen shankle. Kielbasa pancetta chicken strip steak. Cow bresaola biltong, boudin frankfurter filet mignon chislic andouille ham pork belly pastrami kevin.
</p>
<p>
  Biltong alcatra venison burgdoggen landjaeger, ball tip kielbasa prosciutto boudin tri-tip sirloin ribeye. Jowl buffalo pork belly sirloin cow porchetta. Salami prosciutto chuck doner swine buffalo beef andouille hamburger flank turkey short loin pork chop. Leberkas boudin ribeye chicken. Ball tip pancetta pork loin hamburger flank corned beef tongue meatloaf alcatra doner t-bone biltong buffalo rump. Sausage shankle beef beef ribs. T-bone ham hock rump venison swine sausage.</p>
提前感谢您的帮助。

css

1 个回答

  1. Best Answer

    添加底部填充。由于您正在处理内联元素，因此它不会影响布局

    a {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  text-decoration: underline;
  text-underline-offset: 5px;
  padding-bottom: 3px;
  background: linear-gradient(#000 0 0) left bottom no-repeat;
  background-size: 0 1px;
  
}

a:hover {
  text-decoration: none;
  background-size: 100% 1px;
  transition: all 0.8s;
}

body {
  line-height: 1.5;
}
    <p>Bacon ipsum dolor amet picanha pork leberkas tail pig capicola. Fatback bacon rump biltong pastrami meatball cow. Meatloaf venison doner, flank swine pig beef bresaola corned beef capicola tri-tip bacon. Tri-tip rump ham short loin. Prosciutto porchetta corned beef rump. Pork chislic tri-tip short loin landjaeger andouille alcatra jerky sausage turkey. Chuck pastrami t-bone boudin doner pancetta pork chop flank pork shank spare ribs drumstick.</p>
<p>
<h3>Hover this link</h3>
  Andouille pork t-bone beef pig burgdoggen jowl. Shank short loin landjaeger rump alcatra pork belly jerky hamburger. <a href="">Pig cupim tongue meatball hamburger fatback flank prosciutto pork belly shank.</a>Chuck bresaola buffalo, short loin cow tongue tenderloin landjaeger beef cupim boudin shankle chislic t-bone. Sausage tenderloin hamburger leberkas kielbasa doner corned beef frankfurter tri-tip venison pastrami burgdoggen shankle. Kielbasa pancetta chicken strip steak. Cow bresaola biltong, boudin frankfurter filet mignon chislic andouille ham pork belly pastrami kevin.
</p>
<p>
  Biltong alcatra venison burgdoggen landjaeger, ball tip kielbasa prosciutto boudin tri-tip sirloin ribeye. Jowl buffalo pork belly sirloin cow porchetta. Salami prosciutto chuck doner swine buffalo beef andouille hamburger flank turkey short loin pork chop. Leberkas boudin ribeye chicken. Ball tip pancetta pork loin hamburger flank corned beef tongue meatloaf alcatra doner t-bone biltong buffalo rump. Sausage shankle beef beef ribs. T-bone ham hock rump venison swine sausage.</p>

    • 1

相关问题