我正在尝试使用 transition: border-bottom .5s
在元素下显示/隐藏一行结合 ::first-letter
伪元素。伪元素只是让第一个字符bold
.它在 Chrome、Firefox 和 Opera 中运行良好,但 IE 什么也不做。
解决方法是使用简单的 html <b></b>
而不是 css 解决方案 ::first-letter {font-weight: bold;}
.然而,这不是我想要的。
这是一个jsfiddle .
最佳答案
我能想到的唯一其他解决方法是使用 :before
或 :after
border-bottom
的伪元素.这样做,它似乎在 IE 中工作。
在下面的示例中,:after
伪元素绝对定位于父元素的顶部相对。
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>
关于html - 过渡和伪元素的组合在 IE 中不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29129365/