How to add margin-top to pseudo elements

Question

Im trying to add margin top to my titles that contain a css pseudo element.

when trying to add my margin-top the pseudo element (line above text) nests within my margin. how can I add the margin on top of it.

CSS

.line-top{
  font-size: 32px;
  font-weight: 200;
  padding: 30px 0;
  letter-spacing: 2px;
  margin-top:5rem;

  &::before{
    position: absolute;
    display: inline-block;
    content: '';
    background:
     linear-gradient(
       to left,
       $orange 0,
       $orange 50.00%,
       $teal 50.00%,
       $teal  )no-repeat;
    height: 4px;
    width: 190px;
    top: 15px;
  }
}

HTML

<h3 class="line-top">ME Text Title </h3>

IMAGE

@A. Meshu please don't convert code to snippet automatically wihout even running it. His code is a SASS code and creating a snippet is useless. Consider converting the code to CSS if you want to make a runnable snippet — Temani Afif, Jul 21 '19 at 19:12

score 1 · Accepted Answer · answered Jul 21 '19 at 18:26

You're setting your ::before pseudo-element to position absolute however you aren't defining the position property on .line-top. As such it will use the default (static).

You need to use relative positioning instead.

.line-top {
    position: relative;
    ...

Documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/position

How to add margin-top to pseudo elements

1 Answers1