How to make a letter stretch all the way down the paper?

Question

How to make a letter stretch all the way down the paper?

As I'm creating a table of contents for my website, I was inspired by an interesting design idea that I came across:

I am particularly drawn to how the T extends down and each section is numbered with the title wrapped around it. How can I achieve this effect on my own website?

I attempted using an <hr> tag along with this CSS:

.contentLine{
        border: 1px solid white;
        background: white;
        width: 2px;
        height: 200px
    }

Although this creates a straight vertical line as desired, I'm unsure of how, or if it's even possible, to connect it to the word "Contents" that is displayed on my page. Additionally, I prefer not to use the position: absolute; property as I want my website layout to be scalable.

html css

Answer 1

Answer №1

If you're looking to create the illusion of extending a part of an alphabet, one way to achieve this is by utilizing the ::before and ::after pseudo-elements in CSS.

.content{
  text-transform:uppercase;
  font-size:55px;
  font-family:verdana;
  font-weight:700;
}
.t{
  position:relative;
  font-size:35px; /*Control the overall T size*/
}
.t::before{
  content:'';
  height:100%;
  width:100%;
  position:absolute;
  left:-50%;
  top:-50%;
  background-color:black;
  transform:rotate(90deg);
}
.t::after{
  content:'';
  height:1000%;
  width:100%;
  background-color:black;
  position:absolute;
  left:-50%;
  top:0%;

}

<div class="content">
  conten&nbsp;<span class="t">&nbsp;</span>
</div>

Answer 2

If you're looking to create the illusion of extending a part of an alphabet, one way to achieve this is by utilizing the ::before and ::after pseudo-elements in CSS.

.content{
  text-transform:uppercase;
  font-size:55px;
  font-family:verdana;
  font-weight:700;
}
.t{
  position:relative;
  font-size:35px; /*Control the overall T size*/
}
.t::before{
  content:'';
  height:100%;
  width:100%;
  position:absolute;
  left:-50%;
  top:-50%;
  background-color:black;
  transform:rotate(90deg);
}
.t::after{
  content:'';
  height:1000%;
  width:100%;
  background-color:black;
  position:absolute;
  left:-50%;
  top:0%;

}

<div class="content">
  conten&nbsp;<span class="t">&nbsp;</span>
</div>

Answer 3

Answer №2

Instead of utilizing the ::before and ::after pseudo-elements, I decided to create an hr element that aligns with the text and runs vertically down the page. You can view the implementation on Codepen.

html {
  font-family: verdana;
  max-width: 99%;
  height: 200%;
  display: flex;
  flex-direction: row;
}

hr {
  /*Rotates hr*/
  transform: rotate(90deg);
  /*Coloring*/
  border-color: black;
  background-color: black;
  /*Defining Position*/
  position: relative;
  left: -153.26px;
  height: 3.3px;
  top: 185px;
  width: 459px;
  /*Defining Padding/margins and overflow*/
  margin-top: 10px;
  overflow: hidden;
}

#num {
  /*Allows for adjustment of number and description spacing*/
  margin-top: 20px;
  /*Adjusting left offset*/
  z-index: -10;
  margin-left: 40px;
}

#desc {
  /*Allows for adjustment of number and description spacing*/
  margin-top: -50px;
  /*Adjusting left offset*/
  z-index: -10;
  margin-left: 40px;
}

#bd {
  display: flex;
}

#title {
  /*Adjusting bottom & left offsets*/
  margin-left: 20px;
  margin-bottom: -15px;
}

#title1 {
  /*Adjusting bottom & left offsets*/
  margin-left: 140px;
  padding-bottom: 10px;
}

#other {
  padding-top: 40px;
}

<h1>CONTENT</h1>
<hr>
<div id="bd">
  <div id="num">
    <h2>1</h2>
    <h2>2</h2>
    <h2>3</h2>
    <h2>4</h2>
    <h2>5</h2>
    <h2>6</h2>
    <h2>7</h2>
    <h2>8</h2>
  </div>
  <div id="desc">
    <h2 id="title">Book One: The Coming</h2>
    <h2 id="title1">Of The Martians</h2>
    <h2>Longer Description 1</h2>
    <h2>Description 2</h2>
    <h2>Longer Description 3</h2>
    <h2>Description 4</h2>
    <h2>Longer Description 5</h2>
    <h2>Description 6</h2>
    <h2>Longer Description 7</h2>
    <h2>Description 8</h2>
  </div>
</div>
<div id="other">
  <h1>Other Page Content</h1>
</div>

Answer 4

Instead of utilizing the ::before and ::after pseudo-elements, I decided to create an hr element that aligns with the text and runs vertically down the page. You can view the implementation on Codepen.

html {
  font-family: verdana;
  max-width: 99%;
  height: 200%;
  display: flex;
  flex-direction: row;
}

hr {
  /*Rotates hr*/
  transform: rotate(90deg);
  /*Coloring*/
  border-color: black;
  background-color: black;
  /*Defining Position*/
  position: relative;
  left: -153.26px;
  height: 3.3px;
  top: 185px;
  width: 459px;
  /*Defining Padding/margins and overflow*/
  margin-top: 10px;
  overflow: hidden;
}

#num {
  /*Allows for adjustment of number and description spacing*/
  margin-top: 20px;
  /*Adjusting left offset*/
  z-index: -10;
  margin-left: 40px;
}

#desc {
  /*Allows for adjustment of number and description spacing*/
  margin-top: -50px;
  /*Adjusting left offset*/
  z-index: -10;
  margin-left: 40px;
}

#bd {
  display: flex;
}

#title {
  /*Adjusting bottom & left offsets*/
  margin-left: 20px;
  margin-bottom: -15px;
}

#title1 {
  /*Adjusting bottom & left offsets*/
  margin-left: 140px;
  padding-bottom: 10px;
}

#other {
  padding-top: 40px;
}

<h1>CONTENT</h1>
<hr>
<div id="bd">
  <div id="num">
    <h2>1</h2>
    <h2>2</h2>
    <h2>3</h2>
    <h2>4</h2>
    <h2>5</h2>
    <h2>6</h2>
    <h2>7</h2>
    <h2>8</h2>
  </div>
  <div id="desc">
    <h2 id="title">Book One: The Coming</h2>
    <h2 id="title1">Of The Martians</h2>
    <h2>Longer Description 1</h2>
    <h2>Description 2</h2>
    <h2>Longer Description 3</h2>
    <h2>Description 4</h2>
    <h2>Longer Description 5</h2>
    <h2>Description 6</h2>
    <h2>Longer Description 7</h2>
    <h2>Description 8</h2>
  </div>
</div>
<div id="other">
  <h1>Other Page Content</h1>
</div>

How to make a letter stretch all the way down the paper?

Answer №1

Answer №2

Similar questions

Tips on dividing a CSS file into separate lines for improved readability

Adjust the color of the glyphicon icon within a date and time picker dropdown component

What criteria do browsers follow to determine the specific colors to use for border styles like inset and outset?

What is the strategy used by jQuery to select elements by class name?

Creating code to ensure a div element is displayed only after a specific duration has elapsed

The height property in the CSS is causing the parent element to break and cannot be confined

when the window is scrolled a certain amount, use jQuery to scroll back in the opposite direction

The Google Maps App fails to launch now

Using jQuery to create a dynamically moving div that forms an endless wall

The submission of the HTML form is resulting in a lack of values being returned by

Overriding Styles Set by an External CSS file

Tips on aligning vertically centered left and right floating objects without having to use the line height property

HTML forms default values preset

JavaScript personalized video controls. Silence the video by manipulating the input range element

Excessive width of the lower border

How can I attach a click event to the left border of a div using jQuery?

apply a border-radius to the top right corner only without affecting the other sides or background

Dynamic row height in MUI DataGrid

How can I create a timed slideshow of images?

The CSS :not selector does not work as intended