CSS 悬停效果：扩展底部边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28623446/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hover effect : expand bottom border
提问by Vivekraj K R
I'm trying to get a transition hover effect on borderthat the border expands on hover.
我试图在边框上获得过渡悬停效果，边框在悬停时扩展。
h1 {
color: #666;
}
h1:after {
position: absolute;
left: 10px;
content: '';
height: 40px;
width: 275px;
border-bottom: solid 3px #019fb6;
transition: left 250ms ease-in-out, right 250ms ease-in-out;
opacity: 0;
}
h1:hover:after {
opacity: 1;
}<h1>CSS IS AWESOME</h1>I've tried this on Jsfiddle
我在Jsfiddle上试过这个
回答by web-tiki
To expand the bottom border on hover, you can use transform:scaleX'();(mdn reference) and transition it from 0 to 1 on the hover state.
要在悬停时扩展底部边框，您可以使用transform:scaleX'();( mdn reference) 并在悬停状态将其从 0 转换为 1。
Here is an example of what the border hover effect can look like :
以下是边框悬停效果的示例：
The border and transition are set on a pseudo elementto prevent transitioning the text and avoid adding markup.
To expand the bottom border from left or right, you can change the transform-origin propertyto the left or right of the pseudo element:
边框和过渡设置在伪元素上，以防止文本过渡并避免添加标记。
要从左侧或右侧扩展底部边框，您可以将transform-origin 属性更改为伪元素的左侧或右侧：
h1 { color: #666;display:inline-block; margin:0;text-transform:uppercase; }
h1:after {
display:block;
content: '';
border-bottom: solid 3px #019fb6;
transform: scaleX(0);
transition: transform 250ms ease-in-out;
}
h1:hover:after { transform: scaleX(1); }
h1.fromRight:after{ transform-origin:100% 50%; }
h1.fromLeft:after{ transform-origin: 0% 50%; }<h1 class="fromCenter">Expand from center</h1><br/>
<h1 class="fromRight">Expand from right</h1><br/>
<h1 class="fromLeft">Expand from left</h1>Note : You need to add vendor prefixes to maximize browser support (see canIuse).
注意：您需要添加供应商前缀以最大化浏览器支持（请参阅canIuse）。
Expand bottom border on hover with 2 lines
在悬停时用 2 行扩展底部边框
You can achieve this effect when the text spans on 2 lines. The before pseudo element is absolutely positioned to make underline of the first line with bottom:1.2em;:
当文本跨越 2 行时，您可以实现此效果。before 伪元素绝对定位为使第一行的下划线为bottom:1.2em;：
h1 { position:relative;color: #666;display:inline-block; margin:0;text-transform:uppercase;text-align:center;line-height:1.2em; }
h1:after, h1:before {
display:block;
content: '';
border-bottom: solid 3px #019fb6;
transform: scaleX(0);
transition: transform 250ms ease-in-out;
}
h1:before{
position:absolute;
bottom:1.2em; left:0;
width:100%;
}
.ef2:hover:after {
transition-delay:150ms;
}
h1:hover:after, h1:hover:before { transform: scaleX(1); }<h1>Expand border<br/>on two lines</h1>
<br/>
<br/>
<h1 class="ef2">Expand border<br/>effect two</h1>Different transition direction on hover in and out :
悬停进出的不同过渡方向：
The point is to change the transform-origin position from one side to the other on the hover state. This way the bottom boder enters from one side on hover and exits on the otherwhen the element isn't hovered anymore.
Here is a demo :
关键是在悬停状态下将变换原点位置从一侧更改为另一侧。这样，当元素不再悬停时，底部边框在悬停时从一侧进入并在另一侧退出。
这是一个演示：
h1 { color: #666;display:inline-block; margin:0;text-transform:uppercase; }
h1:after {
display:block;
content: '';
border-bottom: solid 3px #019fb6;
transform: scaleX(0);
transition: transform 250ms ease-in-out;
}
h1.fromLeft:after{ transform-origin: 100% 50%; }
h1.fromRight:after{ transform-origin: 0% 50%; }
h1.fromLeft:hover:after{ transform: scaleX(1); transform-origin: 0% 50%; }
h1.fromRight:hover:after{ transform: scaleX(1); transform-origin: 100% 50%; }<h1 class="fromRight">Expand from right</h1><br/>
<h1 class="fromLeft">Expand from left</h1>回答by Philip Enc
I know this is an old post and it is already answered but you might like the following effect too.
我知道这是一篇旧帖子，已经有人回答了，但您可能也喜欢以下效果。
<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)}
}
回答by Levani Jintcharadze
simple and lightweight version
简单轻便的版本
li {
margin-bottom: 10px;
}
.cool-link {
display: inline-block;
color: #000;
text-decoration: none;
}
.cool-link::after {
content: '';
display: block;
width: 0;
height: 2px;
background: #000;
transition: width .3s;
}
.cool-link:hover::after {
width: 100%;
//transition: width .3s;
}<ul>
<li><a class="cool-link" href="#">A cool link</a></li>
<li><a class="cool-link" href="#">A cool link</a></li>
<li><a class="cool-link" href="#">A cool link</a></li>
</ul>回答by raju
we can do using simple transition effect.
我们可以使用简单的过渡效果。
HTML
HTML
<h1>CSS IS AWESOME</h1>
CSS
CSS
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;
}
Link to Fiddle
链接到小提琴
回答by Mohammad Ayoub Khan
h1 {
color: #666;
display:inline-block;
margin:0;
text-transform:uppercase;
}
h1:after {
display:block;
content: '';
border-bottom: solid 3px #92a8d1;
transform: scaleX(0);
transition: transform 800ms ease-in-out;
}
h1:hover:after {
transform: scaleX(1);
}<h1 class="fromCenter">Hover Over Me</h1><br/>回答by Mohammad Ayoub Khan
h1 {
color: #666;
}
h1:after {
position: absolute;
left: 10px;
content: '';
height: 40px;
width: 275px;
border-bottom: solid 3px #019fb6;
transition: all 550ms ease-in-out;
border-bottom-width: 0px;
}
h1:hover:after {
border-bottom-width: 5px;
}<h1>CSS IS AWESOME</h1>