Margin for bottom border

Question

Is there any way I can only add margin to the border ?

Only border should have margin not the text. I am trying to move border not the text field. Border need to be shrinked/moved not text.

CSS :

 .margin-check {
          border-bottom: 1px solid #d2d7da;
          margin-left : 15px;
    }

HTML :

<div class="margin-check">
Something I am typing for checking the border margin
</div>

JS Fiddle: https://jsfiddle.net/c91xhz5e/

Answer 1

You can use pseudo-element and then you can change size of border

.margin-check {
  display: inline-block;
  position: relative;
}

.margin-check:after {
  position: absolute;
  content: '';
  border-bottom: 1px solid #d2d7da;
  width: 70%;
  transform: translateX(-50%);
  bottom: -15px;
  left: 50%;
}

<div class="margin-check">
  Something I am typing for checking the border margin
</div>

Answer 2

In general the margin is from the content which in this case is your text. You have to use box sizing property to set the margin from you border.

* {box-sizing:border-box;}

This way the margin for all your elements will be from the border box and not the content box

Answer 3

In your case, where you have no borders left and right, you can simply adjust the line-height.

.margin-check {
   line-height:2em;
}