Question 292847 in Html Question posted in
Some basic documentation can be found here.

Html – Margin-bottom is not working in "::before" pseudo element

I want to create a line above a text.
Everything is okay except margin-bottom which is not working!
enter image description here

Of course, the negative margin is working as I wish => margin-top: -.5em;
The line should have about 0.5 em from the bottom.

.section-title {
  position: relative;
}

.section-title::before {
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  margin-top: -.5em;
  width: 3em;
  height: .2em;
  background: #ff0000;
}
<header class="hero">
  <div class="section-center hero-center">
    <article>
      <div class="hero-info">
        <h2 class="section-title">Lorem, ipsum.</h2>
        <h4>Lorem ipsum dolor sit.</h4>
        <a href="#" class="btn hero-btn">Lorem, ipsum.</a>
      </div>
  </div>
</header>
Tags:

2

Answers


  1. 0

    You can use text-decoration property instead.

    .section-title {
  position: relative;
  
  text-decoration: solid overline red .2em;
}

.hero {
  margin-bottom: 2rem;
}
    <header class="hero">
  <div class="section-center hero-center">
    <article>
      <div class="hero-info">
        <h2 class="section-title">Lorem, ipsum.</h2>
        <h4>Lorem ipsum dolor sit.</h4>
        <a href="#" class="btn hero-btn">Lorem, ipsum.</a>
      </div>
  </div>
</header>
<hr>
<header class="hero">
  <div class="section-center hero-center">
    <article>
      <div class="hero-info">
        <h2 class="section-title">Lorem, ipsum more ipsum.</h2>
        <h4>Lorem ipsum dolor sit.</h4>
        <a href="#" class="btn hero-btn">Lorem, ipsum.</a>
      </div>
  </div>
</header>
    Login or Signup to reply.
  2. 0 
    .section-title {
  position: relative;
}

.section-title::before {
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  margin-top: -.2em;
  width: 3em;
  height: .2em;
  background: #ff0000;
}
    <header class="hero">
  <div class="section-center hero-center">
    <article>
      <div class="hero-info">
        <h2 class="section-title">Lorem, ipsum.</h2>
        <h4>Lorem ipsum dolor sit.</h4>
        <a href="#" class="btn hero-btn">Lorem, ipsum.</a>
      </div>
  </div>
</header>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search