Home > Net >  CSS - before/after How to display the back block from the front
CSS - before/after How to display the back block from the front

Time:10-28

I created a button with "after" to display the orange background, but it appears in front of me

enter image description here

You can also look at my code in codesandbox

CodePudding user response:

try changing z-index property.

CodePudding user response:

set the z-index: -1; for the ::after pseudo element

CodePudding user response:

Use the z-index to move the after/before block to the back of the block

    .subscribeBtn {
      width: 136px;
      height: 62px;
      position: relative;
      font-family: "Montserrat-regular";
      font-style: normal;
      font-weight: normal;
      font-size: 18px;
      line-height: 22px;
      letter-spacing: 0.05em;
      color: #1b1b1b;
      border: 1px solid #1b1b1b;
      box-sizing: border-box;
      background: #fff;
    }
    .subscribeBtn::after {
      content: "";
      width: 100%;
      height: 100%;
      background: #ff5f10;
      top: -10px;
      left: -10px;
      position: absolute;
      z-index:-1;
    }
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
  </head>
  <body>
    <div style="margin: 40px;">
      <button class="subscribeBtn">
        Subscribe
      </button>
    </div>
  </body>
</html>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response:

add background: transparent; to .subscribeBtn and z-index: -1; to .subscribeBtn:after

here is the example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
  </head>
  <body>
    <div style="margin: 40px;">
      <button class="subscribeBtn">
        Subscribe
      </button>
    </div>
  </body>

  <style>
    .subscribeBtn {
      width: 136px;
      height: 62px;
      position: relative;
      font-family: "Montserrat-regular";
      font-style: normal;
      font-weight: normal;
      font-size: 18px;
      line-height: 22px;
      letter-spacing: 0.05em;
      color: #1b1b1b;
      border: 1px solid #1b1b1b;
      box-sizing: border-box;
      background: transparent;
    }
    .subscribeBtn::after {
      content: "";
      width: 100%;
      height: 100%;
      background: #ff5f10;
      top: -10px;
      left: -10px;
      position: absolute;
      z-index: -1;
    }
  </style>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

  • Related