css中伪元素的使用::before

最新推荐文章于 2025-10-10 22:55:39 发布

原创最新推荐文章于 2025-10-10 22:55:39 发布 · 244 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html5 #html

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

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

<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;
  }
}