I want to add in this orange line.
Like this? I don’t get it. How do I add a horizontal line under the blue line?
<p class="hr3" style='display:table; margin:0; border:5px solid #38761d; border-top:5px solid red; border-bottom:5px solid yellow;width:754px; height:242px; padding:32px; background-color:#000; font-style:normal; font-family:georgia;line-height:1; font-size:89px; color:#38761d'>--------<span></span></p>
This is one way.
<!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>template</title>
<!--
https://www.sitepoint.com/community/t/how-would-i-change-the-axis-of-an-hr-line/236403
asasass
-->
<style type="text/css">
.wrapper {
display:table;
border:8px solid green;
background-color:#000;
margin:0 auto;
}
.hr3 {
border-bottom:8px solid orange;
color:green;
font-style:normal;
font-size:9em;
line-height:1;
font-family:georgia,serif;
text-align:center;
padding:50px 10% 20px;
margin:0 auto;
}
.hr3 span {
display:block;
height:12px;
background-color:#15c;
transform:rotate(-1deg);
margin:16px -.25em; /* negative horizontal margin pulls underline into .hr3's horizontal padding; thus, wider than text. */
}
.morestuff {}
</style>
</head>
<body>
<div class="wrapper">
<p class="hr3">Testing Text<span></span></p>
<p class="morestuff"> </p> <!-- replace non-breaking space with real content -->
</div>
</body>
</html>
What’s another way?
What’s wrong with this way?
If you state your requirements, they can probably be met. I’m not big on guessing games.
1 Like
I want to add 1 horizontal line in here without changing the rest of the code.
<style type="text/css">
.hr3 {
}
.hr3 span {
display:block;
width:750px;
height:8px;
background-color:#1155cc;
transform:rotate(-.9deg);
margin:9px 0; /* changed from "15px auto" so the underline will left align. */
}
</style>
</head>
<body>
<p class="hr3" style='display:table; margin:0; border:5px solid #38761d;width:754px; height:242px; padding:32px; background-color:#000; font-style:normal; font-family:georgia;line-height:1; font-size:89px; color:#38761d'>----------------------<span></span></p>
OK, what do you propose one use to create that line?
One cannot use pseudoelements with inline styles. Without a pseudo-element, one must use a real element such as another <span> pair or the outer div.wrapper that I used.
What would you like to use?
1 Like
Horizontal lines are done using CSS.
The <hr> tag is used to imply a heading with no text.
1 Like
To “split hairs”, You like tomato, I like potato 
To me the semantic meaning of a horizontal rule is more like
“content with a different “theme” than the previous content to follow”
True, a heading also signifies the same, but as you posted has content.
In any case,
horizontal rules, or any other element, should not be used based on how a browser might render them. That’s what CSS is for. They should be used because they are necessary and for their semantic meaning.
4 Likes
Am I allowed to create two classes like this?
<style type="text/css">
.hr3 {
}
.hr3 span {
display:block;
width:750px;
height:8px;
background-color:#1155cc;
transform:rotate(-.9deg);
margin:9px 0; /* changed from "15px auto" so the underline will left align. */
}
.hr4 span {
display:block;
border-bottom:5px solid orange;
width:750px;
height:5px;
margin:9px 0; /* changed from "15px auto" so the underline will left align. */
}
</style>
</head>
<body>
<p class="hr3" class="hr4" style='display:table; margin:0; border:5px solid #38761d;width:754px; height:242px; padding:32px; background-color:#000; font-style:normal; font-family:georgia;line-height:1; font-size:89px; color:#38761d'>----------------------<span></span></p>
Is this right how I have it set up?
<style type="text/css">
.hr3 {
}
.hr3 span {
display:block;
width:750px;
height:8px;
background-color:#1155cc;
transform:rotate(-.9deg);
margin:-8px 0; /* changed from "15px auto" so the underline will left align. */
}
.hr4 {
display:block;
border-bottom:5px solid orange;
width:828px;
height:5px;
margin:-168px 0;
}
</style>
<p class="hr3" style='display:table; margin:0; border:5px solid #38761d;width:754px; height:242px; padding:32px; background-color:#000; font-style:normal; font-family:georgia;line-height:1; font-size:89px; color:#38761d'>----------------------<span></span></p>
<p class="hr4"></p>
How do I move the text up higher without the blue line moving?
<style type="text/css">
.hr3 {
}
.hr3 span {
display:block;
width:750px;
height:8px;
background-color:#1155cc;
transform:rotate(-.9deg);
margin:-8px 0; /* changed from "15px auto" so the underline will left align. */
}
.hr4 {
display:block;
border-bottom:5px solid orange;
width:828px;
height:5px;
margin:-168px 0;
}
</style>
<p class="hr3" style='display:table; margin:0; border:5px solid #38761d;width:754px; height:242px; padding:32px; background-color:#000; font-style:normal; font-family:georgia; font-size:89px;line-height:1; color:#38761d'>Testing The Text<span></span></p>
<p class="hr4"></p>
You have already figured out that your example does not work, so I will only add a short lesson.
An element CAN have two or more classNames. Two or more classNames are written within the one class attribute like this…
<p class="hr3 hr4" ...
The order in which the classNames are written in the HTML class attribute does not matter. The order in which the properties appear in the CSS file does matter.
2 Likes
How do I move the text up higher without the blue line moving?
asasass, the code in posts 30 and 31 is so very wrong that I do not want to try to provide an answer to your question.
You seem to be trying to use as few elements/tags as possible but in this case the structure is so very weak that it breaks if the user has his browser set to a different font size or is not using exactly the same font that you have specified (which all platforms do not recognize, I might add).
Is there any chance that you have the Firefox browser on your computer? If not, would you be willing to download and install it? Firefox will allow you to perform easy font size changes with which you can evaluate how your page might behave on other computers.
Using few tags is a noble goal, but the first goal should be to write stable code.
I suggest that you reconsider the code that I posted in #23.
I will be happy to talk with you and post examples of how to move content up and down, but the structure that you have created in your last three posts is not suitable. Content should naturally flow from top to bottom. Negative vertical margins are infrequent. Massive negative top AND bottom margins are unheard of especially on paragraphs. A line is not a paragraph. There is no proper answer to your question other than write better code.
However, because I know that you are very single-minded, you can change these values and see if it works:
.hr3 {padding:16px 32px 32px;} /* reducing the padding-top raises the text */
.hr3 span {margin:16px 0;} /* adding margin-top to the blue line pushes it back down in place */
It is not a satisfactory solution, though, IMO. Restructuring the code would be much, much better.
About padding and margins,
the longhand / individual properties are:
padding-top: value;
padding-right: value;
padding-bottom: value;
padding-left: value;
The shorthand properties are:
padding: top-right-bottom-left; /* one value supplies all 4 widths */
example: padding: 1em;
padding: top-bottom left-right; /* the first value is applied to top and bottom, the second value is applied to left and right. */
example: padding: 1em 12px;
padding: top right-left bottom; /* the first value applies to top, the second value applies to left and right, the third value applies to bottom. */
example: padding: 0 12px 1em;
padding: top right bottom left; /* the values are applied in the order listed */
example: padding: .5em 6px 1em 12px;
When you applied the negative margin to the first of two values in your shorthand, it was being applied to the top and bottom of the paragraph. That is definitely wrong. 
1 Like
How about that Firefox? Do you have it installed on your computer? If you do not, would you, please?
Did you read post #35 completely, yet?
I’m looking at that now.
1 Like