A vertical line next to vertical text

Question

I'm trying achieve the following; Rotating the text is not the problem however the line under it is. It is supposed to change according to how long the text is. Meaning if the text changes in length the line shrinks or expands accordingly. The top of the text should remain at the same location.

Any ideas ?

EDIT:

what i've tried so far (disregard the 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;
}

}

where I'm at now

Some markup and example what you've tried and what you'd like to achieve would help. — BenM, Dec 05 '16 at 15:58
Please check this link:-http://stackoverflow.com/questions/8865458/how-to-vertically-center-text-with-css — Razia sultana, Dec 05 '16 at 15:59
Here is 2 ways: http://stackoverflow.com/questions/40751045/text-on-the-top-of-an-image/40751752#40751752 — Asons, Dec 05 '16 at 16:09
@LGSon The problem isn't the rotation but getting that line to adjust it's size accordingly — Jannes V, Dec 05 '16 at 17:09

Pete · Accepted Answer · 2016-12-05T17:06:43.897

How is this - I have added comments to show you what is happening

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>

Works like charm, however how would you go about this if you didn't know the height of the image (Ie it scales with the windows) — Jannes V, Dec 05 '16 at 17:47
@JannesV Don't think you'd be able to do that as you need to know the width to know how long your text can be. The only other option would be to do it with javascript so that you could calculate the height of the image on the fly — Pete, Dec 06 '16 at 08:56

A vertical line next to vertical text

1 Answers1