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

Employing CSS animations to elevate div elements

Tips for automatically adjusting a vertical side bar to fit between the browser's header and bottom

What is the best way to isolate the CSS of individual components in Angular 2?

Adjusting the empty image source in Vue.js that was generated dynamically

Creating a dynamic 2D image using HTML5 animation

Obtain the content from a dynamically generated dropdown menu and incorporate it into a separate file

What is the best way to position a box in the center using CSS?

What is the best way to open the index.html file in electron?

When errors occur while printing HTML through an Ajax request, it can hinder the functionality of other JavaScript code

Error with Flask url_for when trying to play a video

The Flutter image blurs into a striking combination of red and black as the screen dimensions are altered

The document type specified in the HTML validation process does not support the use of the "hr" element

Issue with JQuery's click and submit events not triggering, but change event is working fine

The caption below the image is not functioning correctly when hovering over it

Prevent jQuery UI default styling from being applied

What is the process for marking a form field as invalid?

javascript: window.open()

Aligning the navigation links vertically

Preventing selection of past dates with Material UI in ReactJS

Employing jQuery for adding a class to the initial TD in every table row