Bring text infront of line div

Question

Hello I have some text and a line that I need to go through the text without overlapping it.

Here is the goal:

Here is what I have so far:

Some reason I cannot get the text to overpower and put the line behind it. Ive tried my best to figure it out on my own but I have failed so I decided to turn to stack overflow.

Here is the HTML:

<div class="section-3-left">
  <div class="section-3-left-line"></div>
  <div class="section-3-left-text">
    <p>CASE RESULTS</p>
  </div>
</div>

and the CSS:

.section-3-left {
  width: 100%;
  height: 500px;
  position: absolute;
}

.section-3-left-text {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 383px;
    text-align: center;
}

.section-3-left-line {
    position: absolute;
    left: 0;
    top: 250px;
    height: 1px;
    width: 102.8%;
    background-color: #c61000;
}

Here is the jsfiddle link:

jsfiddle

Any help would be greatly apprechiated. Thanks!

Answer 1

I once had almost the same task to complete in one of my projects. From experience, I have this small workaround for you to achieve that in not much lines of code.

What I did here:

• Implemented the box-sizing hack for all the elements to behave as border-box (i.e. include padding),
• Created a .wrapper box with an image background. Our content goes in here, with the title with lines on either sides,
• Used CSS pseudo-elements and background gradients to produce the lines on either side of the .title,
• Used table layout styles to align the lines and the title text in one line, with automatic width adjustment (no matter how long our text is going to be),
• Spaced-up the lines by giving them a width some less than 50%, later pulled them left and right to show up the space
• Added padding to the .title to make the lines appear contained, not bleeding out
• Decorated the .title a bit to look as close to the image your shared in the question

*,
*:before,
*:after {
  box-sizing: border-box;
}

.wrapper {
  background: #333 url(https://unsplash.it/1200/1000) 0 0 no-repeat / cover;
  padding: 1.5em;
  font-family: sans-serif;
  color: rgba(255, 255, 255, .9);
}

.title {
  display: table;
  white-space: nowrap;
  width: 100%;
  text-align: center;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 0 2.5%;
}

.title:before,
.title:after {
  content: '';
  position: relative;
  width: 45%;
  display: table-cell;
  background: linear-gradient(180deg, transparent, currentColor, transparent);
  background-position: 50%;
  background-repeat: repeat-x;
  background-size: 1px auto;
}

.title:before {
  right: 2.5%;
}

.title:after {
  left: 2.5%;
}

<div class="wrapper">
  <div class="title">Case Studies</div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, consequuntur in, laudantium molestiae dolore voluptate hic blanditiis illo. Reprehenderit fugit assumenda voluptates alias reiciendis eum culpa atque consectetur unde ipsum.</p>
  <p>Quaerat tempore dolores harum quasi aliquam mollitia ipsum officiis. Provident voluptatem, alias atque, pariatur quae placeat ducimus nemo id repudiandae porro natus nobis maxime, impedit ipsum consequatur fugit error molestiae?</p>
  <p>Necessitatibus eligendi, quis, itaque aperiam omnis veritatis quia sequi, ea officiis hic quasi, deserunt blanditiis? Nam eligendi molestias sit cum deleniti. Distinctio id ea blanditiis incidunt, voluptatum, commodi culpa suscipit.</p>
</div>

Take a look yourself at the demonstration snippet in the "Full page" view as well.

I hope that answered it well enough. Cheers, happy learning!

Answer 2

You could achieve that using below codes, see we don't want a different tag to assign red line before and after of .section-3-left-text, so .section-3-left-line not needed. Instead style that using pseudo selectors :before and :after in .section-3-left-text and align them using vw as percentage won't work for that. This way your image will be at bottom then text above along-with right and left-side border, try as below

.section-3-left{
  width: 100%;
  height: 300px;
  position:relative;
  overflow:hidden;
}
.section-3-left > img{
   width:100%;
   height:100%;
   position:absolute;
   top:0;
   left:0;
   z-index:1;
}
.section-3-left > .section-3-left-text{
  position:absolute;
  z-index:9;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background:transparent;
 }
.section-3-left > .section-3-left-text:before{
 content:'';
 width:50vw;
 height:1px;
 background:red;
 position:absolute;
 z-index:2;
 top:50%;
 left:-50vw;
 transform:translate(0,-50%);
}
.section-3-left > .section-3-left-text:after{
 content:'';
 width:50vw;
 height:1px;
 background:red;
 position:absolute;
 z-index:2;
 top:50%;
 right:-50vw;
 transform:translate(0,-50%);
}

<div class="section-3-left">
  <div class="section-3-left-text">
    <p>CASE RESULTS</p>
  </div>
  <img src="http://placehold.it/1250x500">
</div>

Check this jsFiddle.

Answer 3

This is the css and html use two dive t create line and use @media to make it responsive

.section-3-left {
    width: 100%;
    height: 500px;
    position: absolute;
}

.section-3-left-text {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: 0 auto;

    text-align: center;
}

.section-3-left-line {
    position: relative;
    left: 0;
    top: 250px;
    height: 1px;
    width: calc(100% - 55%);
    background-color: #c61000;
}
.section-3-right-line {
    background-color: #c61000;
    float: right;
    height: 1px;
    position: relative;
    top: 250px;
    width: calc(100% - 55%);
}
@media only screen and (max-width: 500px) {
    .section-3-right-line{
        width: calc(100% - 70%)!important;
    }
    .section-3-left-line {
        width: calc(100% - 70%)!important;
    }
}
<div class="section-3-left">
<div class="section-3-left-line"></div>
<div class="section-3-right-line"></div>
<div class="section-3-left-text">
    <p>CASE RESULTS</p>
</div>

Answer 4

.section-3-left {
  width: 100%;
  height: 500px;
}

.section-3-left-text {
  position: relative;
  text-align: center;
  padding: 15px 0;
}

.section-3-left-text p {
  background: #f3f5f6;
  display: inline-block;
  margin-top: -30px;
  padding: 10px;
}

.section-3-left-text:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  left: 0;
  margin-top: 8px;
  background-color: #c61000;
  z-index: -1;
}
<div class="section-3-left">

  <div class="section-3-left-text">
    <p>CASE RESULTS</p>
  </div>
</div>

Fiddler https://jsfiddle.net/ya9rvsbe/

Answer 5

    <style>
        .section-3-left {
            width: 100%;
            height: 500px;
            position: absolute;
        }

        .section-3-left-text {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 0;
            right: 0;
            margin: 0 auto;
            width: 383px;
            text-align: center;
        }

        .section-3-left-line {
            position: absolute;
            left: 0;
            top: 250px;
            height: 1px;
            padding-right: 40%;
            background-color: #c61000;
        }

        .section-3-right-line {
            position: absolute;
            right: 0;
            top: 250px;
            height: 1px;
            padding-left: 40%;
            background-color: #c61000;
        }
    </style>

<body>
<div class="section-3-left">
    <div class="section-3-left-line"></div>
    <div class="section-3-right-line"></div>

    <div class="section-3-left-text">
        <p>CASE RESULTS</p>
    </div>

Answer 6

Play with the z-index. I added extra background-color to the text to simulate the image. If you set the z-index of the line to 1 you will see the red line on top of the text. I hope this helps.

.section-3-left {
  width: 100%;
  height: 500px;
  position: absolute;
}

.section-3-left-text {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 383px;
    text-align: center;
    background-color:green;
}

.section-3-left-line {
    position: absolute;
    left: 0;
    top: 250px;
    height: 1px;
    width: 102.8%;
    background-color: #c61000;
    z-index:-1;
}

<div class="section-3-left">
  <div class="section-3-left-line"></div>
  <div class="section-3-left-text">
    <p>CASE RESULTS</p>
  </div>
</div>