我正在尝试使用transition: border-bottom .5s
组合::first-letter
伪元素来显示/隐藏元素下的一行。伪元素只是为了制作第一个字符bold
。它适用于Chrome,Firefox和Opera,但IE根本不做任何事情。
一种解决方法是使用简单的html <b></b>
而不是css解决方案::first-letter {font-weight: bold;}
。但是,这不是我想要的。
这是jsfiddle。
答案 0 :(得分:2)
我能想到的唯一其他解决方法是为:before
使用:after
或border-bottom
伪元素。这样做,它似乎在IE中工作。
在下面的示例中,:after
伪元素绝对位于 relative 到父级的顶部。
a {
display: inline-block;
position: relative;
cursor: pointer;
}
a:after {
content: '';
position: absolute;
top: 100%;
right: 0; left: 0;
border-bottom: 2px solid transparent;
transition: border-bottom .5s;
}
a:hover:after {
border-bottom: 2px solid #777;
}
a:first-letter {
font-weight: bold;
}
<a>my test link</a>