css中伪元素的使用::before

最新推荐文章于 2024-07-11 21:11:19 发布

A！Miss Liu

最新推荐文章于 2024-07-11 21:11:19 发布

阅读量160

点赞数

文章标签： css html5 html

本文链接：https://blog.csdn.net/liuj_j/article/details/120708375

版权

本文通过一个实例展示了如何在CSS中使用伪元素`::before`来创建一个动态边框效果。当鼠标悬停在<div class=item>元素上时，元素会向下平移并添加阴影，而边框则由内侧的一个伪元素在静止状态下呈现，增加了交互体验。

摘要由CSDN通过智能技术生成

项目中伪元素的使用实例
常用类似元素左边框
记录项目中常使用的页面的效果，常用样式页面效果

<div class=item></div>

.item{
  width:100px;
  height:100px;
  border:5px;
  border: solid 1px #dcdfe6;
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
  border-radius: 5px;
  padding: 15px;
  cursor: pointer;
  box-sizing: border-box;
  position: relative;
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 6px;
    border-radius: 5px;
    background-color: #dcdfe6;
  }
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 5px #DDDDDD;
  }
}