Margin for the lower border

Question

Is there a way to add margin only to the border?

Only the border should have markup, not text. I am trying to move a border not to a text box. The border should be squeezed / moved without 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 a pseudo element and then you can resize the frame

.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>

Run codeHide result

Answer 2

A bit confused by your question (not quite sure what you are going to do), but you can use padding, not margin:

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

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

Run codeHide result

, padding-bottom, , ...

Answer 3

In general, margin is the content, which in this case is your text. You must use the window size property to set a border from your border.

* {box-sizing:border-box;}

Thus, the margin for all your elements will be in the frame field, and not in the content field

Answer 4

You can use text-indent.

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

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

Run codeHide result