margin-button is not moving element

Question

i am trying to create 3 lines using a div and before and after selectors. applying margin-top in after is moving the line down but in before margin-bottom is not moving the line up.

<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>Playground</title>
    <style>
        body {
            height: 100vh;
        }

        #area {
            width: 500px;
            height: 5px;
            background: #333;
        }

        #area::after {
            content: "";
            width: 500px;
            height: 5px;
            margin-top: 15px;
            background: red;
            display: block;
        }

        #area::before {
            content: "";
            width: 500px;
            height: 5px;
            margin-bottom: 15px;
            background: blue;
            display: block;
        }
    </style>
</head>

<body>
    <div id="area">

    </div>
</body>
</html>

Use `margin-bottom` for `#area::after` and `margin-top` for `#area::before`. — A. Nadjar, Oct 20 '19 at 16:02
margin-bottom doesn't move up, it push the element after down. A page layout if from top to bottom so we always move bottom. Negative margin may pull element up — Temani Afif, Oct 20 '19 at 16:02
You'll find this useful: https://stackoverflow.com/questions/14196367/before-after-and-padding/14196691 — A. Nadjar, Oct 20 '19 at 16:06

score 0 · Answer 1 · answered Oct 20 '19 at 16:29

The ::before and ::after elements still appear inside their element in the normal flow, so you have to use some relative and absolute positioning to achieve this effect:

#area {
  width: 500px;
  height: 5px;
  background: #333;
  position: absolute;
  margin-top: 30px;
}

#area::before {
  content: "";
  width: 500px;
  height: 5px;
  position: absolute;
  top: -10px;
  background: blue;
  display: block;
}

#area::after {
  content: "";
  width: 500px;
  height: 5px;
  position: absolute;
  top: 10px;
  background: red;
  display: block;
}

<div id="area"></div>

thanks for your answer this is working but why the margin does not work in this case. — pankaj, Oct 22 '19 at 01:22

margin-button is not moving element

1 Answers1