Menu
I am trying to style a an html heading in css but am not getting the correct result as my jsfiddle shows: https://jsfiddle.net/Nadjanara/nmo0245t/ . The following are the html and css codes:
<h2><span>Heading2</span></h2>
h2{
width:100%;
text-align:center;
border-bottom: 1px solid #000;
line-height:0.1em; margin:10px 0 20px;
}
h2 span{
padding:0 10px;
}
How can I put the horizontal line only before and after the heading and also control the width of the line so that such doesn't occupy the full width of the screen?
967
The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic). The <hr> element is most often displayed as a horizontal rule that is used to separate content (or define a change) in an HTML page.
Adding the Horizontal line using CSS Properties: In this case, we will be using the border-style Property to create the horizontal line. We can either use the border-top property that specifies the style of the top border or the border-bottom property, which can set the style of the bottom border of an element.
To create a horizontal line in HTML, you will need to use the HTML hr tag. HR is a block-level element that moves all the elements after it to another line.
There's obviously many ways you can achieve what you're after. But how about something like this?
h1 {
font-size: 4rem;
}
h1::before,
h1::after {
display: inline-block;
content: "";
border-top: .3rem solid black;
width: 4rem;
margin: 0 1rem;
transform: translateY(-1rem);
}<h1>Heading</h1>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
