Vertical words standing alongside an upright line

My goal is to rotate the text without any issues, but I'm having trouble with the line underneath it. The line should adjust its length based on the length of the text. In other words, as the text changes in length, the line should shrink or expand accordingly while keeping the top of the text in the same position.

Any suggestions?

https://i.sstatic.net/kZfj8.png

UPDATE:

This is what I've attempted so far (ignore 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;
    }
}

Current progress: https://i.sstatic.net/rv0NE.png

htmlcss

Answer №1

Here is an example with added comments to help you understand the process

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">for sale</span></span></a>
  </div>

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Steps for designing an HTML table that expands and collapses partially

I am currently revamping an old "Top Screens" page by expanding the display from the top 30 to the top 100 in a basic html table format. However, I only want to show the top 20 on page load with an expand/collapse feature. While I have come across examples ...

javascriptjqueryhtmlcsshtml-table

What is the best way to conceal all lists except for the one that has been chosen?

Looking to enhance my sortable list with jQuery UI - currently it's functional, but I'd like to incorporate a dropdown menu for each item to designate the active one when clicked. Is there a way to modify the code so that upon selection, only th ...

javascriptjqueryhtmlhtml-lists

Delving into the World of CSS

I have been working on changing the background image using this JavaScript code, but I am not sure what to reference in the CSS file. Despite reading through everything, my screen still remains blank. $(function() { var body = $('body'); var bac ...

javascriptjqueryhtmlcss

The image appears uniquely sized and positioned on every screen it is viewed on

After reviewing the previously answered topics on the site, I couldn't seem to make the necessary adjustments. Despite setting the size and location in the css file, the large image remains centered and fitting for the screen. The "imaged1" class seem ...

cssmobilecss-positioncompatibility

Default Slider Features

I am in need of assistance to create a slider similar to this example. Can anyone help me with this? <link type="text/css" href="ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script ...

jquerycssslider

"Exclusive Mui sx styles will be applied only when a specific breakpoint

As I update my old mui styling to utilize the sx attribute, I've noticed the ability to specify styles for different breakpoints using sx = {{ someCssProp: { xs: ..., md: ... and so on. Prior to this, I had been using theme.breakpoints.only for some ...

javascriptcssreactjsmaterial-uibreakpoints

Discover the method used to determine the vertical dimensions of a button

Check out my code snippet (here): <div class="modal-body"> <div class="container"> <div class="row"> <div class="col-8 p-0"> <form class="form-group"> <form> <input type="t ...

htmlcssbootstrap-4

Automatic Expansion Feature for HTML Tables

http://jsfiddle.net/bzL7p87k/ In my table, placeholders are filled with special words. However, what happens when I have more than 4 rows? For instance, if there are 21 placeholders for 21 rows? What I mean is this: I only have one row with a placeholder ...

javascriptjqueryhtmlmysqlcss

Implementing the Upload Feature using AngularJS

Currently, I'm facing a challenge in implementing an upload button on my webpage using AngularJS and Bootstrap. Specifically, I am having trouble assigning the (upload) function to that button in AngularJS. The goal is for the button to enable users t ...

javascripthtmlcssangularjs

Conceal or Reveal Navigation Tabs on Your Website

I recently added a fixed navigation link to my website and also implemented it in the forums and blog section. However, I have noticed that some users find the navigation link to be irritating while browsing the forums. To address this issue, I would like ...

jqueryhtmlnavigationhideshow

Unselecting a span in AngularJS: Switching selection to another span

Whenever I click on an item from my list displayed using ngrepeat, it generates another list specific to the selected element. My goal is to change the background color of the clicked element to indicate it has been selected. However, the problem arises wh ...

javascripthtmlcssangularjs

What is the best way to present information retrieved from a database using ASP.NET and HTML?

I have written a query to fetch a list of items from a database: CREATE PROCEDURE dbo.GetSubjects(@DayComing varchar(10) , @UserId varchar(3)) AS IF EXISTS( SELECT Std_ID FROM Student WHERE Std_ID = @UserID) BEG ...

asp.nethtmlsql

I am struggling to get the images aligned properly on my HTML page. Can someone please advise on how to fix this issue?

On my HTML page, I have 2 div fields. Within each field, there are 5 images listed sideways. The issue is that the images in the div below are not lining up properly side by side. Given my limited frontend knowledge, how can I align them correctly? Here&a ...

htmlcss

Learn how to utilize replaceWith function in order to replace images located within multiple div classes and div id's

Currently, there is an issue with some replaceWith code working while the other is not. For instance, the following code successfully executes: $('.maincontent>h1:contains("Oakland Raiders")').replaceWith('<img src="http://i.nflcdn. ...

jqueryhtml

Modify HTML using JavaScript with an input field

On a PHP-HTML page, I am looking to dynamically change the position of an image with PHP. I know how to do this, but I also want users to have a preview before submitting the values. <form class="ysize" action="phpchangesize.php" method="get" name="zs" ...

javascriptjqueryhtmlcssforms

Combining 2 tables using LINQ Query

I am currently working on a library management project that involves users updating their reading status when they borrow a book. I am facing an issue where, when using LINQ to join tables, everything appears correctly except for the status field. Here are ...

c#htmllinqrazor

Setting the 'checked' status of a select option in a Bootstrap modal dynamically

I recently implemented a Bootstrap modal that is triggered by a link passing multiple parameters to display a select list for users to rate between 1 and 5. While this functionality is working as expected, I now face the challenge of having the select menu ...

javascriptjqueryhtmlbootstrap-4

Errors can be thrown when using React and classNames in the class component

I'm relatively new to React and currently working on a large project. I've run into an issue where I can't use both class and className on all elements and components, particularly custom ones. To work around this, I've had to place the ...

htmlcssreactjsjsx

Why is Google Chrome cutting off parts of my website?

Has anyone encountered the strange rendering issue in Google Chrome? Check out this bug here http://community.mediabrowser.tv/uploads/site_1/126/annoying_rendering_bug.jpg I sometimes experience it when I visit What is causing this issue? Is there a way ...

htmlcssgoogle-chrome

How come "display:none" is still occupying space on the page?

Trying to figure out how to make a specific cell in a table disappear when viewing an HTML page on mobile devices, while having a width of 20% for desktop. However, the issue is that even though the table cell is invisible on mobile, it still occupies sp ...

htmlcss