html5+css3 css3 伪元素如何实现鼠标移入时下划线展开特效？

2021-03-11

1914

css3 伪元素如何实现鼠标移入时下划线展开特效？完整代码<！DOCTYPE html><html><head><meta charset=“UTF-8”><tit

css3 伪元素如何实现鼠标移入时下划线展开特效？

完整代码

<！DOCTYPE html>

<html>

<head>

<meta charset=“UTF-8”>

<title>鼠标移下划展开lt/title>

<style type=“text/css”>

下划线{

宽度：200px

高度：50px

背景：#ddd

边距：20px

位置：相对

}#下划线：后面{

内容：“”

宽度：0

高度：5px

背景：蓝色

位置：绝对

顶部：100%

左侧：50%

过渡：全部.8s

}#下划线：悬停“{

left:0%

width:100%

}

</style>

</head>

<body>

<div id=”underline“></div>

</body>

</html>”