Erstellen einer horizontalen Linie zwischen Span und Absatz mit Flexbox

Question

Gibt es eine Möglichkeit, dass ich eine horizontale Linie zwischen der Spannen und den Absatz haben kann. Die Linie sollte die gleiche Breite wie der Absatz haben. Wie kann ich dies nachvollziehen? Ich kann ein Div nicht verwenden, weil es dann als ein Flex-Element erkannt wird und es neben dem Absatz platziert wird.

Wenn Sie weitere Informationen benötigen. Lass es mich wissen.

rentout.html.erb

<div class="vorteil_wrapper"> 
    <div class="rentout_content_left"> 
     <p class="rentout_paragraph"> 
      <span class="rentout_heading">Erstellung eines professionellen Inserats</span></br> 
      Wir besuchen Ihre Unterkunft und erstellen professionelle Fotos und Videos, 
      welche nach der Bearbeitung für Ihr Inserat auf unserer Internetseite 
      genutzt werden. Darüber hinaus verfassen wir eine hochwertige Beschreibung 
      und Präsentation Ihrer Unterkunft, welche die Highlights sowie die 
      Atmosphäre Ihrer Unterkunft in Vordergrund setzt. 
     </p> 
    </div> 
    <div class="rentout_picture_right"> 
     <%= image_tag("inserat.png", alt: "inserat", :class => "inserat") %> 
    </div> 
</div> 

<div class="vorteil_wrapper_reverse"> 
    <div class="rentout_content_right"> 
     <p class="rentout_paragraph"> 
      <span class="rentout_heading">Responsive Webdesign</span></br> 
      Wussten Sie das 65% aller Internet Nutzer ein Handy zum Surfen benutzen! 
      Ihr zukünftiges Inserat wird auf unserer Seite optimal auf allen Geräten 
      angezeigt, um somit die Benutzerfreundlichkeit und die Umsatzrate zu 
      steigern. 
     </p> 
    </div> 
    <div class="rentout_picture_left"> 
     <%= image_tag("responsive_webdesign.png", alt: "responsive webdesign", :class => "responsive_webdesign") %> 
    </div> 
</div> 

application.scss

.vorteil_wrapper { 
    height: 200px; 
    margin-bottom: 0px; 
    display: flex; 
    justify-content: space-around; 
} 

.vorteil_wrapper_reverse { 
    margin-bottom: 30px; 
    display: flex; 
    justify-content: space-around; 
    flex-direction: row-reverse; 
} 

.rentout_content_left { 
    height: 200px; 
    width: 100%; 
    padding-right: 30px; 
    display: flex; 
    align-items: center; 
} 

.rentout_content_right { 
    height: 200px; 
    width: 100%; 
    padding-left: 30px; 
    display: flex; 
    align-items: center; 
} 

.rentout_heading { 
    font: 28px Raleway-Medium, sans-serif; 
    margin-bottom: 6px; 
    display: inline-block; 
    text-decoration: underline; 
    text-decoration-color: red; 
} 

.rentout_paragraph { 
    text-align: justify; 
    font: 18px Raleway-Regular, sans-serif; 
} 

hier Dies wird versucht, das Problem mit der Position zu lösen: absolut. Das Problem ist, dass jede Überschrift auf einer anderen Höhe beginnt, weil die Elemente (Absatz/Bereich) innerhalb der div (rentout_content_left/rentout_content_right) zentriert sind und die Anzahl der Zeichen in jedem Absatz und Bereich variieren.

.rentout_wrapper { 
 
    max-width: 1000px; 
 
    width: 100%; 
 
    margin: 0 auto; 
 
} 
 
.vorteil_wrapper { 
 
    height: 200px; 
 
    margin-bottom: 0px; 
 
    display: flex; 
 
    justify-content: space-around; 
 
    position: relative; 
 
} 
 
.vorteil_wrapper_reverse { 
 
    margin-bottom: 30px; 
 
    display: flex; 
 
    justify-content: space-around; 
 
    flex-direction: row-reverse; 
 
} 
 
.rentout_content_left { 
 
    height: 200px; 
 
    width: 100%; 
 
    padding-right: 30px; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 
.rentout_content_right { 
 
    height: 200px; 
 
    width: 100%; 
 
    padding-left: 30px; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 
.rentout_heading { 
 
    font: 28px Raleway-Medium, sans-serif; 
 
    margin-bottom: 6px; 
 
    display: inline-block; 
 
} 
 
.rentout_heading::after { 
 
    content: ""; 
 
    position: absolute; 
 
    border-bottom: 1px solid red; 
 
    left: 0; 
 
    bottom: -5px; 
 
    width: 100% 
 
} 
 
.rentout_paragraph { 
 
    text-align: justify; 
 
    font: 18px Raleway-Regular, sans-serif; 
 
}

<div class="rentout_wrapper"> 
 
    <div class="vorteil_wrapper"> 
 
    <div class="rentout_content_left"> 
 
     <p class="rentout_paragraph"> 
 
     <span class="rentout_heading">Erstellung eines professionellen Inserats</span> 
 
     </br> 
 
     Wir besuchen Ihre Unterkunft und erstellen professionelle Fotos und Videos, welche nach der Bearbeitung für Ihr Inserat auf unserer Internetseite genutzt werden. Darüber hinaus verfassen wir eine hochwertige Beschreibung und Präsentation Ihrer Unterkunft, 
 
     welche die Highlights sowie die Atmosphäre Ihrer Unterkunft in Vordergrund setzt. 
 
     </p> 
 
    </div> 
 
    <div class="rentout_picture_right"> 
 
     <img src="//lorempixel.com/200/192"> 
 
    </div> 
 
    </div> 
 

 
    <div class="vorteil_wrapper_reverse"> 
 
    <div class="rentout_content_right"> 
 
     <p class="rentout_paragraph"> 
 
     <span class="rentout_heading">Responsive Webdesign</span> 
 
     </br> 
 
     Wussten Sie das 65% aller Internet Nutzer ein Handy zum Surfen benutzen! Ihr zukünftiges Inserat wird auf unserer Seite optimal auf allen Geräten angezeigt, um somit die Benutzerfreundlichkeit und die Umsatzrate zu steigern. 
 
     </p> 
 
    </div> 
 
    <div class="rentout_picture_left"> 
 
     <img src="//lorempixel.com/200/192"> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

können Sie Pseudo-Element verwenden ::after in Ihrem span

Hinweis: </br> ist ungültig, entweder Sie verwenden <br>, <br/> oder <br />

.vorteil_wrapper { 
 
    height: 200px; 
 
    margin-bottom: 0px; 
 
    display: flex; 
 
    justify-content: space-around; 
 
} 
 
.vorteil_wrapper_reverse { 
 
    margin-bottom: 30px; 
 
    display: flex; 
 
    justify-content: space-around; 
 
    flex-direction: row-reverse; 
 
} 
 
.rentout_content_left { 
 
    height: 200px; 
 
    width: 100%; 
 
    padding-right: 30px; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 
.rentout_content_right { 
 
    height: 200px; 
 
    width: 100%; 
 
    padding-left: 30px; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 
.rentout_heading { 
 
    font: 28px Raleway-Medium, sans-serif; 
 
    margin-bottom: 6px; 
 
    display: block; 
 
    position: relative 
 
} 
 
.rentout_heading::after { 
 
    content: ""; 
 
    position: absolute; 
 
    border-bottom: 1px solid red; 
 
    left: 0; 
 
    bottom: -5px; 
 
    width: 100% 
 
} 
 
.rentout_paragraph { 
 
    text-align: justify; 
 
    font: 18px Raleway-Regular, sans-serif; 
 
}

<div class="vorteil_wrapper"> 
 
    <div class="rentout_content_left"> 
 
    <p class="rentout_paragraph"> 
 
     <span class="rentout_heading">Erstellung eines professionellen Inserats</span> 
 
     <br /> 
 
     Wir besuchen Ihre Unterkunft und erstellen professionelle Fotos und Videos, welche nach der Bearbeitung für Ihr Inserat auf unserer Internetseite genutzt werden. Darüber hinaus verfassen wir eine hochwertige Beschreibung und Präsentation Ihrer Unterkunft, 
 
     welche die Highlights sowie die Atmosphäre Ihrer Unterkunft in Vordergrund setzt. 
 
    </p> 
 
    </div> 
 
    <div class="rentout_picture_right"> 
 
    <img src="//lorempixel.com/200/200"> 
 
    </div> 
 
</div> 
 

 
<div class="vorteil_wrapper_reverse"> 
 
    <div class="rentout_content_right"> 
 
    <p class="rentout_paragraph"> 
 
     <span class="rentout_heading">Responsive Webdesign</span> 
 
     <br /> 
 
     Wussten Sie das 65% aller Internet Nutzer ein Handy zum Surfen benutzen! Ihr zukünftiges Inserat wird auf unserer Seite optimal auf allen Geräten angezeigt, um somit die Benutzerfreundlichkeit und die Umsatzrate zu steigern. 
 
    </p> 
 
    </div> 
 
    <div class="rentout_picture_left"> 
 
    <img src="//lorempixel.com/200/200"> 
 
    </div> 
 
</div>

Answer 2

Sie können die folgende Lösung versuchen Sie es mit ::after auf Klasse .rentout_heading:

.vorteil_wrapper { 
 
    height: 200px; 
 
    margin-bottom: 0px; 
 
    display: flex; 
 
    justify-content: space-around; 
 
} 
 
.vorteil_wrapper_reverse { 
 
    margin-bottom: 30px; 
 
    display: flex; 
 
    justify-content: space-around; 
 
    flex-direction: row-reverse; 
 
} 
 
.rentout_content_left { 
 
    height: 200px; 
 
    width: 100%; 
 
    padding-right: 30px; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 
.rentout_content_right { 
 
    height: 200px; 
 
    width: 100%; 
 
    padding-left: 30px; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 
.rentout_heading { 
 
    font: 28px Raleway-Medium, sans-serif; 
 
    margin-bottom: 6px; 
 
    display: inline-block; 
 
    text-decoration-color: red; 
 
    width:100%; 
 
} 
 
.rentout_heading::after { 
 
    content:""; 
 
    display:block; 
 
    border:1px solid red; 
 
} 
 
.rentout_paragraph { 
 
    text-align: justify; 
 
    font: 18px Raleway-Regular, sans-serif; 
 
}

<div class="vorteil_wrapper"> 
 
    <div class="rentout_content_left"> 
 
    <p class="rentout_paragraph"> 
 
     <span class="rentout_heading">Erstellung eines professionellen Inserats</span></br> 
 
    Wir besuchen Ihre Unterkunft und erstellen professionelle Fotos und Videos, 
 
    welche nach der Bearbeitung für Ihr Inserat auf unserer Internetseite 
 
    genutzt werden. Darüber hinaus verfassen wir eine hochwertige Beschreibung 
 
    und Präsentation Ihrer Unterkunft, welche die Highlights sowie die 
 
    Atmosphäre Ihrer Unterkunft in Vordergrund setzt. 
 
    </p> 
 
</div> 
 
<div class="rentout_picture_right"> 
 
    <img src="http://placehold.it/200x200"/> 
 
</div> 
 
</div> 
 

 
<div class="vorteil_wrapper_reverse"> 
 
    <div class="rentout_content_right"> 
 
    <p class="rentout_paragraph"> 
 
     <span class="rentout_heading">Responsive Webdesign</span></br> 
 
    Wussten Sie das 65% aller Internet Nutzer ein Handy zum Surfen benutzen! 
 
    Ihr zukünftiges Inserat wird auf unserer Seite optimal auf allen Geräten 
 
    angezeigt, um somit die Benutzerfreundlichkeit und die Umsatzrate zu 
 
    steigern. 
 
    </p> 
 
</div> 
 
<div class="rentout_picture_left"> 
 
<img src="http://placehold.it/200x200"/> 
 
</div> 
 
</div>