I have the following CSS to make an H1
that has a line through the background and it is centered. I have to use a span
element between my h1
tag for it to work.
The CSS is
h1 {
font-size: 28px;
font-family:'Palatino';
font-style: italic;
font-weight:600;
color: #2D6A97;
margin-bottom:60px;
position:relative;
text-align:center;
}
h1 span {
background:#FDFCF8;
padding: 0 15px;
position: relative;
z-index: 1;
}
h1:before {
background:#E5DEC6;
content: "";
display:block;
height: 1px;
position:absolute;
top:50%;
width:100%;
}
h1:before {
left: 0;
}
On other pages though, I want just a normal H1
(without any CSS).
How could I change what I have so that the unstyled H1
still looks normal?
Ideally, I would like to be able to do something like:
<h1 class="withborder"><span>Here's my H1</span></h1>