Css 悬停效果：展开底部边框

我试图在边框上获得一个过渡悬停效果，即边框在悬停时展开

h1{
颜色：#666；
}
h1：之后{
位置：绝对位置；
左：10px；
内容：''；
高度：40px；
宽度：275px；
边框底部：实心3px#019fb6；
过渡：左250ms缓进缓出，右250ms缓进缓出；
不透明度：0；
}
h1：悬停：之后{
不透明度：1；
}

CSS太棒了

还是你在找这个

---

要展开悬停时的底部边框，可以使用

transform:scaleX'（）（），并在悬停状态下将其从0转换为1

下面是边框悬停效果的示例：

边框和转换设置在伪元素上，以防止文本转换并避免添加标记。

要从左侧或右侧展开底部边框，可以将其更改为伪元素的左侧或右侧：


h1{颜色：#666；显示：内联块；边距：0；文本转换：大写；}
h1：之后{
显示：块；
内容：''；
边框底部：实心3px#019fb6；
变换：scaleX（0）；
转换：转换250ms缓进缓出；
}
h1:hover:after{transform:scaleX（1）；}
h1.fromRight:在{转换原点：100%50%；}之后
h1.fromleet:after{变换原点：0%50%；}
从中心展开

从右侧展开

从左展开
我们可以使用简单的过渡效果

HTML

链接到
我知道这是一篇老文章，已经有人回复了，但是你可能也喜欢下面的效果

<div class="cd-single-point">
    <a class="cd-img-replace" href="#0"></a>
</div>

   .cd-single-point {
    position: absolute;
    list-style-type: none;
    left: 20px;
    top: 20px;
  }

  .cd-single-point>a {
      position: relative;
      z-index: 2;
      display: block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #0079ff;
      -webkit-transition: background-color 0.2s;
      -moz-transition: background-color 0.2s;
      -o-transition: background-color 0.2s;
      transition: background-color 0.2s;
  }

  .cd-single-point::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    animation: cd-pulse 2s infinite;
  }

  @keyframes cd-pulse
  {
  0%  {box-shadow:0 0 0 0 #0079ff}
  100%{box-shadow:0 0 0 20px rgba(255,150,44,0)}
  }


.cd单点{
位置：绝对位置；
列表样式类型：无；
左：20px；
顶部：20px；
}
.cd单点>a{
位置：相对位置；
z指数：2；
显示：块；
宽度：10px；
高度：10px；
边界半径：50%；
背景#0079ff；
-webkit过渡：背景色0.2s；
-moz过渡：背景色0.2s；
-o过渡：背景色0.2s；
过渡：背景色0.2s；
}
.cd单点：：之后{
内容：''；
位置：绝对位置；
边界半径：50%；
宽度：100%；
身高：100%；
排名：0；
左：0；
动画：cd脉冲2s无限；
}
@关键帧cd脉冲
{
0%{box shadow:0#0079ff}
100%{box shadow:020px rgba（255150,44,0）}
}


h1{
颜色：#666；
}
h1：之后{
位置：绝对位置；
左：10px；
内容：''；
高度：40px；
宽度：275px；
边框底部：实心3px#019fb6；
过渡：所有550ms缓进缓出；
边框底宽：0px；
}
h1：悬停：之后{
边框底宽：5px；
}
CSS太棒了
h1{
颜色：#666；
显示：内联块；
保证金：0；
文本转换：大写；
}
h1：之后{
显示：块；
内容：''；
边框底部：实心3px#92a8d1；
变换：scaleX（0）；
转换：转换800ms易入易出；
}
h1：悬停：之后{
变换：scaleX（1）；
}
将鼠标悬停在我身上
简单轻量级版本


li{
边缘底部：10px；
}
.酷链接{
显示：内联块；
颜色：#000；
文字装饰：无；
}
.酷链接：：之后{
内容：''；
显示：块；
宽度：0；
高度：2倍；
背景：#000；
过渡：宽度3s；
}
.cool链接：hover:：after{
宽度：100%；
//过渡：宽度3s；
}




我们只需要
背景就可以做到这一点。不需要伪元素。这是更灵活的


h1{
/*您可以更改这些变量以控制边框*/
--边框颜色：紫色；
--边框宽度：5px；
--底部距离：0px；/*您可以增加此距离*/
颜色：#666；
显示：内联块；
背景图像：线性渐变（var（--边框颜色），var（--边框颜色））；
背景大小：0%var（--边框宽度）；
背景重复：无重复；
过渡：背景尺寸0.3s；
保证金：5px0；
}
.fromCenter{
背景位置：50%钙（100%-var（--底部距离））；
}
fromRight先生{
背景位置：100%calc（100%-var（--底部距离））；
}
.左{
背景位置：0 calc（100%-var（--底部距离））
}
h1：悬停{
背景尺寸：100%var（--边框宽度）；
}
从中心展开

从右侧展开

使用
scaleX（0.0001）
从左侧展开
。
我得到了一些工件，但将其设置为
scaleX（0）
似乎可以解决这个问题。@ChristiaanMaks你是对的。我正在更新答案如果你有，这是一个跨一行的句子。这是一个跨两行但从第一行开始的句子line@JBis你可以做类似的事情，比如：点击名字输入。我试着在一个div的底部使用这个，但是它将线条与div分开放置，使其比div的宽度短。如何控制布局，使其保持与标准底部边框样式相同的长度和位置？谢谢！被接受的答案对我不起作用，但这确实起了作用。如果其他人有问题，请尝试一下。
<h1>CSS IS AWESOME</h1>

h1 {
    color: #666;
    position: relative;
    display: inline-block;
}

h1:after {
    position: absolute;
    left: 50%;
    content: '';
    height: 40px;
    height: 5px;
    background: #f00;
    transition: all 0.5s linear;
    width: 0;
    bottom: 0;  
}

h1:hover:after {
    width: 270px;
    margin-left: -135px;
}

<div class="cd-single-point">
    <a class="cd-img-replace" href="#0"></a>
</div>

   .cd-single-point {
    position: absolute;
    list-style-type: none;
    left: 20px;
    top: 20px;
  }

  .cd-single-point>a {
      position: relative;
      z-index: 2;
      display: block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #0079ff;
      -webkit-transition: background-color 0.2s;
      -moz-transition: background-color 0.2s;
      -o-transition: background-color 0.2s;
      transition: background-color 0.2s;
  }

  .cd-single-point::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    animation: cd-pulse 2s infinite;
  }

  @keyframes cd-pulse
  {
  0%  {box-shadow:0 0 0 0 #0079ff}
  100%{box-shadow:0 0 0 20px rgba(255,150,44,0)}
  }