Überschrift Grenze erweitern außerhalb des Ansichtsfensters

Question

Ich versuche, Überschriften mit Rahmen zu erreichen, die außerhalb des Ansichtsfensters auf einer Seite erweitert, genau wie auf dem Bild unten.

Ich habe es geschafft, die man Code, der auf der linken Seite ausgerichtet ist und Rand erweitert auf die linke Seite, wie dies mit dem Code:

.wrapper { 
 
     width: 1100px; 
 
     margin: 0 auto; 
 
     box-sizing: border-box; 
 
     padding: 1.5rem; 
 
    } 
 

 
    
 
    h2 { 
 
     font-size: 2em; /* 32/16 */ 
 
     font-weight: 200; 
 
     color: #000; 
 
     position: relative; 
 
     margin: 0 -9600rem; 
 
     padding: 1.2rem 9600rem; 
 
     background: transparent; 
 
     z-index: 0; 
 
     display:block; 
 
     max-width:660px; 
 
    } 
 
    
 
    h2::before { 
 
     content: ""; 
 
     position: absolute; 
 
     z-index: -1; 
 
     top: 0; 
 
     bottom: 0; 
 
     left: 0rem; 
 
     right: 9598.5rem; 
 
     background: transparent; 
 
     border:2px solid #000; 
 
    } 
 
    
 
    h2.right { 
 
     font-size: 2em; /* 32/16 */ 
 
     font-weight: 200; 
 
     color: #000; 
 
     text-align: right; 
 
     position: relative; 
 
     margin: 0 -9600rem; 
 
     padding: 1.2rem 9600rem; 
 
     background: transparent; 
 
     z-index: 0; 
 
     display:block; 
 
     max-width:660px; 
 
    } 
 
    
 
    h2.right::before { 
 
     content: ""; 
 
     position: absolute; 
 
     z-index: -1; 
 
     top: 0; 
 
     bottom: 0; 
 
     left: 9598.5rem; 
 
     right: 0rem; 
 
     background: transparent; 
 
     border:2px solid #000; 
 
    }

<section> 
 
<div class="wrapper"> 
 
\t <h2>s každou nehnuteľnosťou možno pohnúť najmä vo váš prospech</h2> 
 
\t <h2 class="right">s každou nehnuteľnosťou možno pohnúť najmä vo váš prospech</h2> 
 
</div> 
 
    </section>

HTML:

CSS:

Problem ist mit dem Text, der rechts vom Wrapper ausgerichtet werden soll und den Rahmen nach rechts erweitern. Meine bisherigen Ergebnisse sehen wie folgt aus:

Der Text beginnt immer noch am linken Rand des Wrappers und ist nicht 660px vom rechten Rand des Wrappers, wie es sein soll. Irgendeine Idee, wie man das repariert? Ich habe versucht, mit mehreren Variablen herumzuspielen, aber nichts hat funktioniert.

Answer 1

Ich habe um ein wenig mit ihm in einer Geige gespielt: https://jsfiddle.net/38t1286m/

EDIT : ich damit einige mehr gespielt ... https://jsfiddle.net/38t1286m/4/;)

Im Grunde habe ich vereinfacht es, so dass das HTML wie folgt aussieht:

<header> 
    <h2> 
     This is my LEFT side header 
    </h2> 
</header> 
<p> 
    Here is some text in between... 
</p> 
<header class="right"> 
    <h2> 
     This is my RIGHT side header 
    </h2> 
</header> 

Und mit dem folgenden CSS:

p { 
    width: 660px; 
    margin-right: auto; 
    margin-left: auto; 
} 
h2 { 
    border: 1px solid black; 
    max-width: 660px; 
    margin: 0; 
    margin-left: auto; 
    display: inline-block; 
    padding-top: 20px; 
    padding-bottom: 20px; 
} 
header { 
    position: relative; 
    max-width: 660px; 
    padding: 0; 
    margin: 0; 
    margin-right: auto; 
    margin-left: auto; 
} 
header:before { 
    content: " "; 
    width: 660px; 
    border: 1px solid red; 
    position: absolute; 
    left: -660px; 
    right: -660px; 
    overflow: hidden; 
    top: 0; 
    bottom: 0; 
} 
header.right { 
    text-align: right; 
} 
header.right:before { 
    left: 660px; 
    right: 660px; 
} 

Das ist, zumindest, wie ich glaube, ich es lösen würde. :)

Answer 2

Sie könnten die zweite Position nach rechts schweben und dann klar, dass es mit :after

h2.right { 
    text-align: right; 
    background: transparent; 
    z-index: 0; 
    float: right; 
} 

h2.right::after { 
    content: ''; 
    clear: both; 
} 

codepen