<div class="entire-box">
  <h1>Pseudo Element</h1>
  <p>::before and ::after element implemented together.</p>
  <div class="box"></div>
  <p></p>
</div>
.entire-box {
  width: 350px;
  height: max-content;
  border: 1px solid grey;
  padding-left: 10px;
  padding-right: 20px;
  padding-bottom: 20px;
  box-shadow: 20px 20px 10px grey;
}

.box::before {
  content:"";
  position: absolute;
  Width: 200px;
  height: 10px;
  background-color: red;
  z-index: 2;
  border-radius: 10px;
}

.box::after {
  content:"";
  position: absolute;
  Width: 280px;
  height: 10px;
  background-color: grey;
  border-radius: 10px;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.