:after/:before使用技巧

時間 2019-11-11

標籤使用技巧简体版

原文原文鏈接

僞類:after/:before基本使用css

div:before{
    content:'';//必需要寫，沒寫則僞元素無效
    display:;
    position:'';
    ...
}
//在一個div子元素前插入元素，並不是渲染在文檔裏，而是在css裏渲染

使用技巧：html

（1）界面分隔空間spa

開發中，經常會有相似這樣的分隔空間3d

div:before{
    content:'';
    display:'block';
    background:#F8F8F8;   
}

只需添加幾行css就可實現效果code

（2）用來清除浮動htm

div:before{
    content:'';
    display:'block';
    clear:both;   
}

(3)畫三角符號blog

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
    .box{
      position: relative;
      width:200px;
      height:200px;
      border:1px solid #ccc;
      margin:100px auto;
    }
    .box:before{
      content:'';
      display: block;
      width: 0;
      height: 0;
      border:50px solid transparent;
      border-right-color: blue;
      position: absolute;
      left:-100px;
      top:50px;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。