Nesh Nesh - 14 days ago 8
CSS Question

Pseudo element in after starting from center - CSS

Following is my code in which I am trying to apply a red color bottom to a div in such a way that it takes

50px
left and right
margin
and then stretch to the max width, but somehow it is moving to the left. Let me know how can I make to appear in center to the bottom of the div with 50px space left from left and right.

Also let me know why the
::after
element is creating from the center than from the extreme left. [Refer to the image of its creation].

HTML -

<div class="container">
<h1>This is a simple heading</h1>
<h3>This is only a test description</h3>
</div>


CSS -

.container {
background: #34EACC;
width: 100%;
text-align: center;
}
.container:after {
content: "";
position: absolute;
width: 100%;
margin: 0 50px;
height: 1px;
background-color: red;
}


JSFIDDLE - https://jsfiddle.net/gwdvqs5j/

IMAGE -

image-alignment

Answer

While defining absolute you also should declare left or right properties if want to position the element

.container {
  background: #34EACC;
  width: 100%;
  text-align: center;
}

.container:after {
  content: "";
  position: absolute;
  width: 90%;
  left: 0;
  right: 0;
  margin: 0 auto;
  height: 1px;
  background-color: red;
}
<div class="container">
  <h1>This is a simple heading</h1>
  <h3>This is only a test description</h3>
</div>