CSS pseudo element positioning - partial border above header

user_1001034 0
Viewed 76

I am struggling to position the partial border directly above the title without the title floating to the left of the 'before' pseudo element. It works fine on pages without an image but I need the title and text to wrap around the image on some pages where an image exists but not on others and this is causing the issue.

I have tried absolute positioning, different displays but nothing works.

https://codepen.io/lol4000/pen/dyZvmGK

 <img width="420" height="195" src="https://heuristic-hypatia.91-134-228-53.plesk.page/wp-content/uploads/2013/02/Fotolia_50400145_XS.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="PIM" srcset="https://heuristic-hypatia.91-134-228-53.plesk.page/wp-content/uploads/2013/02/Fotolia_50400145_XS.jpg 420w, https://heuristic-hypatia.91-134-228-53.plesk.page/wp-content/uploads/2013/02/Fotolia_50400145_XS-300x139.jpg 300w" sizes="(max-width: 420px) 100vw, 420px">            <h2 class="sub-title">Test English subtitle</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia porta velit, ornare lobortis tortor aliquam at. Vivamus tristique, nulla vitae tempus vehicula, ante arcu lobortis est, nec maximus nunc ipsum et nunc.</p> <p>Donec mattis vulputate tellus, vel tincidunt purus condimentum vel. </p>Cras vehicula, ex non varius faucibus, felis orci consectetur dui, vitae auctor lectus ex ornare ligula. Maecenas nec lectus turpis. <p>In varius ligula eu leo rhoncus fringilla. Nullam blandit iaculis cursus. Sed pulvinar sollicitudin rhoncus. </p><p>Pellentesque vulputate luctus ante non luctus. Integer tincidunt, tellus at maximus fermentum, lorem ante sagittis elit, in varius dui nulla et est. In hac habitasse platea dictumst. Integer eget nunc nec augue congue vestibulum. Vestibulum id libero enim.</p> <p>Etiam vulputate efficitur erat a viverra. Mauris eu malesuada lacus. Sed vestibulum est in velit euismod, quis porttitor velit rhoncus.</p><p>Pellentesque vulputate luctus ante non luctus. Integer tincidunt, tellus at maximus fermentum, lorem ante sagittis elit, in varius dui nulla et est. In hac habitasse platea dictumst. Integer eget nunc nec augue congue vestibulum. Vestibulum id libero enim.</p> <p>Etiam vulputate efficitur erat a viverra. Mauris eu malesuada lacus. Sed vestibulum est in velit euismod, quis porttitor velit rhoncus.</p>

h2.sub-title {font-size:28px;display: block;}
h2.sub-title::before{ position: relative; height: 8px;width: 130px;left: 0;  top: -10px;background: #441A6D;display:block;content: ""}


.wp-post-image {
    float: left;
    margin: 0 15px 10px 0;}
pseudo-element css html
4 Answers

Update: Ok, so we use display: inline-block; in heading to properly define the role of the box in the page, which is inline. Since there is no wrapper element in our content, we do not need to do anything else (except the relative and absolute positioning). Also, I used the float: left; on the img since we want img to be on the far left and the rest of the content overflow in its right.

h2.sub-title {
  font-size: 28px;
  position: relative;
  display: inline-block;
}

h2.sub-title::before {
  position: absolute;
  height: 8px;
  width: 130px;
  left: 0;
  top: -10px;
  background: #441A6D;
  display: block;
  content: "";
}

img {
  margin: 0 15px 10px 0;
  max-width: 100%;
  height: auto;
  float: left;
}
<div>
  <img src="https://via.placeholder.com/200x200">
  <h2 class="sub-title">Test English subtitle</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia porta velit, ornare lobortis tortor aliquam at. Vivamus tristique, nulla vitae tempus vehicula, ante arcu lobortis est, nec maximus nunc ipsum et nunc.</p>
  <p>Donec mattis vulputate tellus, vel tincidunt purus condimentum vel. </p>Cras vehicula, ex non varius faucibus, felis orci consectetur dui, vitae auctor lectus ex ornare ligula. Maecenas nec lectus turpis.
  <p>In varius ligula eu leo rhoncus fringilla. Nullam blandit iaculis cursus. Sed pulvinar sollicitudin rhoncus. </p>
  <p>Pellentesque vulputate luctus ante non luctus. Integer tincidunt, tellus at maximus fermentum, lorem ante sagittis elit, in varius dui nulla et est. In hac habitasse platea dictumst. Integer eget nunc nec augue congue vestibulum. Vestibulum id libero
    enim.
  </p>
  <p>Etiam vulputate efficitur erat a viverra. Mauris eu malesuada lacus. Sed vestibulum est in velit euismod, quis porttitor velit rhoncus.</p>
  <p>Pellentesque vulputate luctus ante non luctus. Integer tincidunt, tellus at maximus fermentum, lorem ante sagittis elit, in varius dui nulla et est. In hac habitasse platea dictumst. Integer eget nunc nec augue congue vestibulum. Vestibulum id libero
    enim.
  </p>
  <p>Etiam vulputate efficitur erat a viverra. Mauris eu malesuada lacus. Sed vestibulum est in velit euismod, quis porttitor velit rhoncus.</p>
</div>

user_177306520

Use flex instead float:

h2.sub-title {
  font-size: 28px;
  display: block;
}

h2.sub-title::before {
  position: relative;
  height: 8px;
  width: 130px;
  left: 0;
  top: -10px;
  background: #441A6D;
  display: block;
  content: ""
}

div {
  display: flex;
}

.wp-post-image {
  margin: 0 15px 10px 0;
}
<div><img width="420" height="195" src="https://heuristic-hypatia.91-134-228-53.plesk.page/wp-content/uploads/2013/02/Fotolia_50400145_XS.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="PIM" srcset="https://heuristic-hypatia.91-134-228-53.plesk.page/wp-content/uploads/2013/02/Fotolia_50400145_XS.jpg 420w, https://heuristic-hypatia.91-134-228-53.plesk.page/wp-content/uploads/2013/02/Fotolia_50400145_XS-300x139.jpg 300w"
    sizes="(max-width: 420px) 100vw, 420px">
  <h2 class="sub-title">Test English subtitle</h2>
</div>

user_170071840

Since you want the text to go to the bottom of the photo, you used this method and the h2 tag covers the entire container, so the first h2 is the beginning of the photo.

h2.sub-title {font-size:28px;display: block;position: relative;}
h2.sub-title::before{ position: absolute; height: 8px;width: 130px;left: 0;  top: -10px;background: #441A6D;display:block;content: ""}

Get width and margin-right img by JavaScript and set to style left ::before, and before is absolute

user_180322710

As far I understood, I've created an alternate solution rather than pesudo element. please check it out and let me know.

.image-text{display: flex; flex-direction:row; flex-wrap: wrap;}
.heading{posittion: relative;}
h2.sub-title {font-size:28px;position: relative;}
.border{ position: relative; height: 8px;width: 130px; top: 17px;background: #441A6D; display: inline-block; }


.wp-post-image {
    margin: 0 15px 10px 0;}
<div class="image-text"> 
  <div class="image"><img width="420" height="195" src="https://heuristic-hypatia.91-134-228-53.plesk.page/wp-content/uploads/2013/02/Fotolia_50400145_XS.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="PIM" srcset="https://heuristic-hypatia.91-134-228-53.plesk.page/wp-content/uploads/2013/02/Fotolia_50400145_XS.jpg 420w, https://heuristic-hypatia.91-134-228-53.plesk.page/wp-content/uploads/2013/02/Fotolia_50400145_XS-300x139.jpg 300w" sizes="(max-width: 420px) 100vw, 420px"> 
  </div>
  <div class="heading">
    <span class="border"></span>
    <h2 class="sub-title">Test English subtitle</h2>

  </div>
</div>

user_111681760
Related