How would I move both the text and span line up and down together as one?

<style type="text/css"> 

.outer {
width:1500px;  /*1500*/
height: 500px;
  border: 0px solid #38761d;
  background-color: #000;
  margin: 0 auto;  /* top+bottom  left+right */
}

.hr3 {
  color: #38761d;
  font-style: normal;
  font-size: 168px;
  font-family: georgia;
  text-align: center;
  padding-top: 63px; /*102 */
  padding-bottom: 230px; /*500 */
  margin-top: 0;
  margin-bottom: 0;
}

.hr3 span {
  display: block;
  height: 12px;
  background-color: #15c;
  transform: rotate(-.9deg);
  margin-top: 2px;
  margin-left: 47px;
  margin-right: 49px;
}


  


</style>

</head>
<body>

<div class="outer">
    <p class="hr3">Test Test test<span></span></p>

</div>

</body>
</html>

@ronpat Could probably help me achieve this.

The question is awkward to answer because I do not know WHY you want to reposition the text and its underline. In other words, you may want to add more text or an image in this box but have not mentioned it yet. Most everything that we do in HTML and CSS depends on what is around it… its context.

(1) It is best not to use a fixed height on .outer.
(2) Add up the total number of padding top and bottom pixels in .hr3.
.hr3 {padding-top:63px} and hr3 {padding-bottom:232px} = 295px. Save this number “just in case” you need it.
(3) To keep the height of .outer the same and move the text with its underline higher in the box,
subtract some padding from the padding-top and add that same number to padding-bottom.
(4) You would do the reverse to move the text with its underline lower in the box.

I have repeated these notes at the top of this HTML page.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>move title and underline together</title>
<!--
https://www.sitepoint.com/community/t/how-would-i-move-both-the-text-and-span-line-up-and-down-together-as-one/252372
(1) It is best not to use a fixed height on .outer.
(2) Add up the total number of padding top and bottom pixels in .hr3.
     .hr3 {padding-top:63px} and hr3 {padding-bottom:232px} = 295px.  Save this number "just in case" you need it.
(3) To keep the height of .outer the same and move the text with its underline higher in the box,
      subtract some padding from the padding-top and add that same number to padding-bottom.
(4) You would do the reverse to move the text with its underline lower in the box.
-->
    <style type="text/css">
.outer {
  width:1500px;  /*1500*/
/*  height:500px; */
  border:0px solid #38761d;
  background-color:#000;
  margin:0 auto;  /* top+bottom  left+right */
}

.hr3 {
  color:#38761d;
  font-style:normal;
  font-size:168px;
  font-family:georgia,serif;
  text-align:center;
  padding-top:63px;  /* 102 */
  padding-bottom:232px;  /* should be at least 30px to contain the slanted underline */
  margin-top:0;
  margin-bottom:0;
}

.hr3 span {
  display:block;
  height:12px;
  background-color:#15c;
  transform:rotate(-.9deg);
  margin-top:2px;
  margin-left:47px;
  margin-right:49px;
}
    </style>
</head>
<body>

<div class="outer">
    <p class="hr3">Test Test test<span></span></p>
</div>

</body>
</html>
3 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.