📜  在页面加载 css 代码示例上添加扩展下划线

📅  最后修改于: 2022-03-11 14:47:34.934000             🧑  作者: Mango

代码示例1
#sec {
  display: inline-block;
  position: relative;
  padding-bottom: 3px;
}
#sec:after {
  content: '';
  display: block;
  margin: auto;
  height: 3px;
  width: 0px;
  background: transparent;
  transition: width .5s ease, background-color .5s ease;
}
#sec:hover:after {
  width: 100%;
  background: blue;
}