How to Make a Line Before and After My H1 Tag

How to make a line before and after my h1 tag?

<!DOCTYPE html>
<html>
<head>
<title>Inline HR</title>
<style type="text/css">
div {
    text-align: center;
}

hr {
    display: inline-block;
    width: 40%;
}
</style>
</head>
<body>
<div style="center">
<hr>
My Text
<hr>
</div>
</body>
</html>

Demo: http://jsfiddle.net/cKrqK/

However, if you are not happy that the HR's don't extend all the way to the edges of the page due to 40% width, this is how you can solve it.

<!DOCTYPE html>
<html>
<head>
<title>Text on HR</title>
<style type="text/css">
.text {
    position: relative;
    top: -1em;
    text-align: center;
}

.text span {
    background-color: #ffffff;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0.5em;
    padding-right: 0.5em;
}
</style>
</head>
<body>
<hr>
<div class="text">
<span>
My text
</span>
</div>
</body>
</html>

Demo: http://jsfiddle.net/EdtwL/

The second example, places your text with a white background (change it to whatever background your page has) on the HR and center-aligns it with margin-left: auto and margin-right: auto.

How to make a line before and after my h1 tag?

<!DOCTYPE html>
<html>
<head>
<title>Inline HR</title>
<style type="text/css">
div {
    text-align: center;
}

hr {
    display: inline-block;
    width: 40%;
}
</style>
</head>
<body>
<div style="center">
<hr>
My Text
<hr>
</div>
</body>
</html>

Demo: http://jsfiddle.net/cKrqK/

However, if you are not happy that the HR's don't extend all the way to the edges of the page due to 40% width, this is how you can solve it.

<!DOCTYPE html>
<html>
<head>
<title>Text on HR</title>
<style type="text/css">
.text {
    position: relative;
    top: -1em;
    text-align: center;
}

.text span {
    background-color: #ffffff;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0.5em;
    padding-right: 0.5em;
}
</style>
</head>
<body>
<hr>
<div class="text">
<span>
My text
</span>
</div>
</body>
</html>

Demo: http://jsfiddle.net/EdtwL/

The second example, places your text with a white background (change it to whatever background your page has) on the HR and center-aligns it with margin-left: auto and margin-right: auto.

Two lines in h1 tag

Using:

<h1>Line 1 <br/> Line 2</h1>

Responsive image before and after h1 tag

You just needed to fix the widths of the before and after elements. They were 100% so were taking up the full width of the title.

I also dropped the font-size. You'll have to take care of that with media queries if you want it to grow on larger screens etc.

body {  height: 100%;  margin: 0;  background-repeat: no-repeat;  background-attachment: fixed;  background: #000;}
h1{  display: block;}
h1.heading {  position: relative;  color: #fff;  font-family: sans-serif;  font-size: 1.5rem;  font-weight: 700;  line-height: 87px;  letter-spacing: .02rem;  text-align: center;  text-transform: uppercase;  width: 100%;  margin: 0;  margin-top: 30px;  padding: 0;}
h1.heading:before {  display: inline-block;  margin: 0 20px 8px 0;  content: " ";  text-shadow: none;  background: url(https://i.imgur.com/fcoggcZ.png) no-repeat right center;  width: 30%;  height: 87px;  position: absolute;  left: 0;}h1.heading:after {  display: inline-block;  margin: 0;  content: " ";  text-shadow: none;  background: url(https://i.imgur.com/KCzu3hE.png) no-repeat left center;  width: 30%;  height: 87px;  position: absolute;  right: 0;}

<h1 class="heading"><i class="logo"></i>Welcome World</h1>

Line before and after title over image

You can make a line on both sides of the title with 2 pseudo elements and borders:

This works over a transparent background (lines and title have transparent backgrounds).
The line length will adapt to the title width so they alway start and end at the same position regardless to title length.
The title can span on several lines while the left and right lines stay verticaly centered (Note that you need to wrap the title in a <span> tag for this to work. See demo)

Title with line before and after over an image

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300); body {  background-image: url(http://i.imgur.com/EzOh4DX.jpg);  background-repeat: no-repeat;  background-size: 100% auto;  font-family: 'Open Sans', sans-serif;}h1 {  width: 70%;  margin: .7em auto;  overflow: hidden;  text-align: center;  font-weight:300;  color: #fff;}h1:before, h1:after {  content: "";  display: inline-block;  width: 50%;  margin: 0 .5em 0 -55%;  vertical-align: middle;  border-bottom: 1px solid;}h1:after {  margin: 0 -55% 0 .5em;}span {  display: inline-block;  vertical-align: middle;}

<h1>Today</h1><h1>Today news</h1><h1><span>Today<br/>news</span></h1>

How to display a horizontal line before and after a heading in css

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>

H1 tag and P tag on the same line?

So if you had:

<div id="containerIntro">
    <h1>Headline</h1>
    <p>And here the text right after...</p>
</div>

Your CSS would have to look something like this:

#containerIntro h1,
#containerIntro p {
    display: inline;
    vertical-align: top;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 28px;
}

See http://jsfiddle.net/F3Bcd/3/.

How to Make a Line Before and After My H1 Tag

How to make a line before and after my h1 tag?

How to make a line before and after my h1 tag?

Two lines in h1 tag

Responsive image before and after h1 tag

Line before and after title over image

How to display a horizontal line before and after a heading in css

H1 tag and P tag on the same line?

Related Topics

Leave a reply