1

I am trying to have a line before and after my text but I want it to be responsive and currently the only way I can find is by using width... so its not responsive.

I would prefer to use before and after psuedo elements only but if its not possible then I am find with another approach.

HTML:

<div class="section-header text-center">
  <h2>Testing</h2>
</div>

CSS:

.section-header {
  position: relative;
}

.section-header h2 {
  border: 2px solid rgba(0, 0, 0, 0.1);
  padding: 0.3em 0.8em;
  display: inline-block;
}

.section-header::before,
.section-header::after {
  border-top: 1px solid black;
  display: block;
  height: 1px;
  content: " ";
  width: 40%;
  position: absolute;
  left: 0;
  top: 1.2em;
  opacity: 0.1;
}

.section-header::after {
  right: 0;
  left: auto;
}

.text-center {
    text-align: center !important;
}

JSFiddle Demo

Braiam
  • 1
  • 11
  • 47
  • 78
HeelMega
  • 458
  • 8
  • 23

2 Answers2

2

You can consider the pseudo element relative to h2 instead and rely on overflow to hide the non needed parts:

.section-header {
  position: relative;
  overflow:hidden; /*mandatory*/
}

.section-header h2 {
  border: 2px solid black;
  padding: 0.3em 0.8em;
  display: inline-block;
  position:relative;
}

.section-header h2::before,
.section-header h2::after {
  content: " ";
  width: 100vw; /*big value here*/
  height: 1px;
  position: absolute;
  top: 0.6em;
  background:black;
}

.section-header h2::after {
  left: calc(100% + 40px); /*40px offset from the title*/
}
.section-header h2::before {
  right: calc(100% + 40px);
}

.text-center {
    text-align: center;
}
<div class="section-header text-center">
  <h2>Testing</h2>
</div>

Another idea without transparency is to consider background and box-shadow like below:

.section-header {
  position: relative;
  background:linear-gradient(black,black) center/100% 1px no-repeat;
}

.section-header h2 {
  border: 2px solid black;
  padding: 0.3em 0.8em;
  display: inline-block;
  position:relative;
  background:#fff;
  box-shadow: 
    40px 0 0 #fff,
    -40px 0 0 #fff;
}
.text-center {
    text-align: center;
}
<div class="section-header text-center">
  <h2>Testing</h2>
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
1

A simple option is to use a flexbox for section-header - then you can:

  • set the space between the h2 and the lines using a margin set to the h2
  • set the width of the pseudo elements as 100% - being a flex item, it will adapt to the space available

See demo below:

.section-header {
  position: relative;
  display: flex; /* sets a flex container */
  align-items: center; /* aligns vertically */
}

.section-header h2 {
  border: 2px solid rgba(0, 0, 0, 0.1);
  padding: 0.3em 0.8em;
  display: inline-block;
  margin: 0 1em; /* space between h2 and line if needed */
}

.section-header::before,
.section-header::after {
  border-top: 1px solid black;
  display: block;
  height: 1px;
  content: " ";
  width: 100%; /* full-width ;)*/
  top: 1.2em;
  opacity: 0.1;
}

.text-center {
  text-align: center !important;
}
<div class="section-header text-center">
  <h2>Testing</h2>
</div>
kukkuz
  • 41,512
  • 6
  • 59
  • 95
  • What if I have I have 2 words? Like Testing Test... Test goes to another line... why is that? – HeelMega Mar 25 '19 at 00:00
  • 2
    @HeelMega replace `width:100%` with `flex-grow:1` to fix the issue – Temani Afif Mar 25 '19 at 00:07
  • @HeelMega or you can add `white-space: nowrap` to the `h2` :) – kukkuz Mar 25 '19 at 00:24
  • 2
    please don't add *flexbox* or *css3* tag to the question. The question has nothing to do with flexbox so people looking for flexbox question doesn't need to see it because they will find nothing about flexbox. Providing a solution with *X* doesn't mean we need to add the *X* to the question. – Temani Afif Mar 25 '19 at 20:21