heading with horizontal line on either side

Question

I am working on some CSS where the design calls for page titles (headings) to be centered with horizontal lines that are vertically centered on either side. Further, there is a background image on the page so the background of the title needs to be transparent.

I have centered the title and I can use pseudo class to create the line. But I need the line disappear when it cross the text of the title.

I considered using a background gradient that goes transparent where the words are, but since each title could be a different length, I wouldn't know where to put the stops.

Here is the CSS so far:

h1 {  
    text-align: center;  
    position: relative;  
    font-size: 30px;  
    z-index: 1;  
}  

h1:after {  
    content: '';  
    background-color: red;  
    height: 1px;  
    display: block;  
    position: absolute;  
    top: 18px;  
    left: 0;  
    width: 100%;  
}

Here is where I'm at: http://jsfiddle.net/XWVxk/1/

Can this be done with CSS without adding any extra HTML?

Would not vote to close as possible duplicate. Other similar questions use additional markup or backgrounds. — Greg Pettit, Mar 21 '13 at 21:29

score 97 · Accepted Answer · edited Sep 06 '18 at 07:15

97

Look at this http://blog.goetter.fr/post/36084887039/tes-pas-cap-premiere-edition , here is your answer.

Here is your original code modified

h1 {
    position: relative;
    font-size: 30px;
    z-index: 1;
    overflow: hidden;
    text-align: center;
}
h1:before, h1:after {
    position: absolute;
    top: 51%;
    overflow: hidden;
    width: 50%;
    height: 1px;
    content: '\a0';
    background-color: red;
}
h1:before {
    margin-left: -50%;
    text-align: right;
}
.color {
    background-color: #ccc;
}

<h1>This is my Title</h1>
<h1>Another Similar Title</h1>
<div class="color"><h1>Just Title</h1></div>

Note: the article is not online anymore, here is the last good archived version: http://web.archive.org/web/20140213165403/http://blog.goetter.fr/post/36084887039/tes-pas-cap-premiere-edition

edited Sep 06 '18 at 07:15

Sumit

2,242
1
24
37

answered Mar 21 '13 at 20:42

Romain Pellerin

2,470
3
27
36

Thanks, although your fiddle did not work for me the link provided the solution I needed. Thanks! – Tom Greever Mar 21 '13 at 21:38
2

Is there a way to place a "margin" between the beginning/end of the word and the end/beginning of the lines? – Pierre Sep 09 '13 at 14:22
Actually found how to do it, just add a margin to the h1:after declaration... – Pierre Sep 09 '13 at 14:24
This doesn't seem to work in IE... tested in 9 & 10. Anyone know a fix? – LiveSource Jul 05 '14 at 07:08
See http://stackoverflow.com/a/23155413/908861 for working solution in IE 9 + – LiveSource Jul 05 '14 at 07:21

electrophanteau · Answer 2 · 2021-01-28T10:21:30.683

68

needed this a few days ago, but the accepted answer isn't working in IE.

this is what I came up with: works in every major browser (> ie8)

jsfiddle: http://jsfiddle.net/gKve7/

/* headlines with lines */
.decorated{
     overflow: hidden;
     text-align: center;
 }
.decorated > span{
    position: relative;
    display: inline-block;
}
.decorated > span:before, .decorated > span:after{
    content: '';
    position: absolute;
    top: 50%;
    border-bottom: 2px solid;
    width: 100vw;
    margin: 0 20px;
}
.decorated > span:before{
    right: 100%;
}
.decorated > span:after{
    left: 100%;
}

<h2 class="decorated"><span>My Title</span></h2>

edited Jan 28 '21 at 10:21

answered Apr 18 '14 at 13:42

electrophanteau

1,322
10
12

1

I'm not really clear on why the width value on the span:before and span:after has to be that precise value, setting it to 200% seems to work equally well for me. This is a great answer though. :) – Nathan Pitman Oct 27 '14 at 13:40
1

this is just some code i copied from a project i've been workin' on. the width should be at least half of the containing element (h2 in this case). setting it to 200% will cause strange behaviour depending on the length of your content. though happy i could help you :) – electrophanteau Oct 28 '14 at 14:13
1

I like this one either. I've tested both of them on jsFiddle and this one doesn't get a weird effect when you resize the window to a smaller size. +1! Although I needed to do some hacks as I didn't had control on the html for the `
` tags on the project I was working on - http://jsfiddle.net/yL13Lrcp/
– Chun Jun 02 '15 at 21:49
1

this solution is more clean and work will all browsers plus easy to edit . – J.Tural Jan 12 '16 at 14:35
This is not working on Firefox – DJ22T Feb 03 '16 at 20:36
have you tried the jsfiddle in FF? i did and it's working – electrophanteau Feb 04 '16 at 13:25
Just wanted to add that h2 comes with its own styling, so use
instead for better results.
– Rachel S Sep 15 '16 at 16:46
What about settings the width of `:before` and `:after` to `100vw` – oyvindym May 08 '19 at 12:22

score 1 · Answer 3 · edited Apr 09 '16 at 10:18

This might work:

.floatClear {
  clear: both;
}
#wrapper {
  text-align: center;
  position: relative;
}
#wrapper .line {
  border-bottom: 2px solid red;
  position: absolute;
  width: 100%;
  top: 15px;
}
#wrapper .textbox {
  position: absolute;
  width: 100%;
}
#wrapper .textbox .text {
  background-color: white;
  margin: 0px auto;
  padding: 0px 10px;
  text-align: center;
  display: inline;
  font-size: 24px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>HTML</title>
  <link rel="stylesheet" href="main.css" type="text/css" />
</head>

<body>
  <div id="wrapper">
    <div class="line"></div>
    <div class="textbox">
      <div class="text">This is my Title</div>
    </div>
  </div>
</body>

</html>

What happens here is you set the text over the line the background and with the background-color plus the side padding so it will hide the line behind the text block.

heading with horizontal line on either side

3 Answers3

` tags on the project I was working on - http://jsfiddle.net/yL13Lrcp/

Linked

Related