伪类的巧应用省去activ的隐藏逻辑

实现这种效果

demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
      .father{
        /* padding: 30px; */
        display: flex;
      }
      .son{
        width: 100px;
        height: 100px;
        box-shadow:2px 2px 3px #aaaaaa;
      }
      .son.active{
        background-color: aqua;
        position: relative;
      }
      .son.active::after{
        content: "";
        position: absolute;
        width: 100px;
        height: 20px;
        background-color: blue;
        bottom: 0;
      }
  </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
        <div class="son active"></div>
        <div class="son"></div>
    </div>
</body>
</html>

来源：oschina

链接：https://my.oschina.net/u/4004801/blog/4315609

标签

Shadow

FLEX

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!

伪类的巧应用 省去activ的隐藏逻辑

伪类的巧应用省去activ的隐藏逻辑