Issue
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?
Solution
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>
Answered By - Jonathan
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.