Eine vertikale Linie neben dem vertikalen Text

Question

Ich versuche, das Folgende zu erreichen; Drehen des Textes ist nicht das Problem, aber die Linie darunter ist. Es soll sich ändern, wie lange der Text ist. Wenn sich der Text in der Länge ändert, wird die Zeile entsprechend verkleinert oder vergrößert. Der obere Teil des Textes sollte am selben Ort bleiben.

Irgendwelche Ideen?

EDIT:

, was ich bisher ausprobiert habe (außer Acht lassen, die flex):

<section class="slideshow"> 

    <div class="forsale"> 
     <a href="#">te koop</a> 
     <span></span> 
    </div> 

    <img src="./img/project_1.jpg" alt=""> 

</section> 

.forsale { 

position: relative; 
a { 
    position: absolute; 
    transform: rotate(-90deg) translate(0 ,100%; 
    transform-origin:0% 0%; 
    background-color: #eee; 
    display: block; 
    text-decoration: none; 
    color: black; 
    width: 385px; 
} 
span { 
    display: block; 
    width: 1px; 
    height: 100%; 
    background-color: black; 
    position: absolute; 
    left: 50%; 
    bottom: 0; 
} 

} 

, wo ich jetzt

Answer 1

bin Wie ist das - ich habe hinzugefügt Kommentare zu zeigen, was

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.slideshow { 
 
    position: relative; 
 
} 
 
.forsale { 
 
    width: 500px; /*this width = height of image */ 
 
    position: absolute; /* the following styles move this div to the middle of the slideshow div*/ 
 
    left: 50px; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    z-index: 1; 
 
} 
 
img { 
 
    margin-left: 100px; /* this is just making space for the text */ 
 
    display: block; /* removes any space below the image */ 
 
} 
 
.forsale a { 
 
    /* this rotates the anchor so it is dow the side of the image and moves it to the left of the forsale div */ 
 
    transform-origin: center; 
 
    transform: translate(-50%, 0) rotate(270deg); 
 
    display: block; 
 
    width: 100%; 
 
    width text-decoration: none; 
 
    color: black; 
 
} 
 
.half { 
 
    display:block; 
 
    width: 50%; 
 
    position: relative; 
 
    text-align: right; 
 
} 
 
.half:after { 
 
    /* this is the black line */ 
 
    content: ''; 
 
    display: block; 
 
    width: 100%; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 50%; 
 
    border-top: 1px solid #000000; 
 
    z-index: 1; 
 
} 
 
.line-hide { 
 
    /* this is to cover the black line under the text*/ 
 
    position: relative; 
 
    display: inline-block; 
 
    padding-left: 10px; /* however much space you want before the line */ 
 
    background-color: #ffffff; /* bacground colour of the page - hides the line */ 
 
    z-index: 2; 
 
}

<section class="slideshow"> 
 
    <div class="forsale"> 
 
    <a href="#"><span class="half"><span class="line-hide">te koop</span></span></a> 
 
    </div> 
 

 
    <img src="http://lorempixel.com/100/500/sports/1" alt=""> 
 
</section>