css ：after和：before

時間 2019-12-08

標籤 css 欄目 CSS 简体版

原文原文鏈接

:before是css中的一種僞元素，可用於在某個元素以前插入某些內容。
:after是css中的一種僞元素，可用於在某個元素以後插入某些內容。css

舉例：html

1.結合border寫個對話框的樣式。web

<style>
    .test-div{
        position: relative;  /*平常相對定位*/
        width:150px;
        height: 36px;
        border:black 1px solid;
        border-radius:5px;
        background: rgba(245,245,245,1)
    }
    .test-div:before,.test-div:after{
        content: "";  /*:before和:after必帶技能，重要性爲滿5顆星*/
        display: block;
        position: absolute;  /*平常絕對定位*/
        top:8px;
        width: 0;
        height: 0;
        border:6px transparent solid;
    }
    .test-div:before{
        left:-11px;
        border-right-color: rgba(245,245,245,1);
        z-index:1
    }
    .test-div:after{
        left:-12px;
        border-right-color: rgba(0,0,0,1);
        z-index: 0
    }
  </style>
  <div class="test-div"></div>

2.做爲內容的半透明背景層。佈局

  <style>
      body{
          background: url(ABUIABACGAAg6KijvAUo1PqcwwIwgA84uwU.jpg) no-repeat left top /*這裏加了個圖片背景，用以區分背景的半透明及內容的徹底不透明*/
      }
      .test-div{
          position: relative;  /*平常相對定位(重要，下面內容也會介紹)*/
          width:300px;
          height: 120px;
          padding: 20px 10px;
          font-weight: bold;
      }
      .test-div:before{
          position: absolute;  /*平常絕對定位(重要，下面內容也會略帶介紹)*/
          content: "";  /*:before和:after必帶技能，重要性爲滿5顆星*/
          top:0;
          left: 0;
          width: 100%;  /*和內容同樣的寬度*/
          height: 100%;  /*和內容同樣的高度*/
          background: rgba(255,255,255,.5); /*給定背景白色，透明度50%*/
          z-index:-1; /*平常元素堆疊順序(重要，下面內容也會略帶介紹)*/
      }
  </style>
  <!--這裏容獸偷個懶，佈局簡單寫寫-->
  <body>
  <div class="test-div">
      <table>
          <tr>
              <td>Name</td>
              <td><input placeholder="your name" /></td>
          </tr> 
          <tr>
              <td>Password</td>
              <td><input placeholder="your password" /></td>
          </tr> 
          <tr>
              <td></td>
              <td><input type="button" value="login" /></td>
          </tr>
      </table>
  </div>

相關標籤/搜索

每日一句

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