How to get Line-On-Sides Headers?

The post mockup was this:

I coded up one way to do it which works, but isn’t quite perfect. I figured I’d post it here and you all could chime in with better ways if you can think of them.

If the background was a solid color, this would be fairly easy. Apply the lined background to the subhead and center a span in the middle with a bit of padding and a background color to match the solid background. We don’t have a solid background color here. Perhaps some trickery using the same background image but fixing the background position would work, but I didn’t go there.

Instead, I used the ::before and ::after pseudo elements to create the left and right set of lines. The text is still in a span, which is relatively positioned. The right set is a pseudo element on that span which starts 100% from the left with a bit of margin to push it away, and vice versa for the left set. Both are of a fixed height and use border-top and border-bottom to create the lines. Thus no backgrounds are used and the insides of everything is transparent.

The length of the lines is long enough to always break out of the parent container, and they are cut off by hidden overflow on that parent.

CSS

.fancy {
  line-height: 0.5;
  text-align: center;
}
.fancy span {
  display: inline-block;
  position: relative;  
}
.fancy span:before,
.fancy span:after {
  content: "";
  position: absolute;
  height: 5px;
  border-bottom: 1px solid white;
  border-top: 1px solid white;
  top: 0;
  width: 600px;
}
.fancy span:before {
  right: 100%;
  margin-right: 15px;
}
.fancy span:after {
  left: 100%;
  margin-left: 15px;
}

HTML

1. <article>
2. <h1>Main Title</h1>
3. <p class="subtitle fancy"><span>A fancy subtitle</span></p>
4. <div class="copy">
5. <p>Bacon ipsum dolor sit amet pancetta meatloaf eiusmod laborum commodo officia ex exercitation bacon. Sunt magna duis ex prosciutto nostrud. Tri-tip ball tip sausage spare ribs sirloin sunt officia anim magna eiusmod turducken sint velit meatball ham hock. Exercitation culpa pork chop rump, short loin meatball ut aute tenderloin.</p>
7. <p>Cillum pariatur ground round filet mignon capicola ad ham id doner sirloin beef ribs qui mollit pork chop. Laboris bacon officia tenderloin tempor, tongue excepteur tail occaecat meatloaf consectetur ham hock consequat ut. Frankfurter jerky enim irure salami aliqua. In pork loin meatball, ut ad in nisi turkey turducken mollit.</p>
9. <p>Filet mignon capicola aute short loin pork belly qui ball tip spare ribs do short ribs sint. Commodo dolore rump nostrud ball tip. Veniam in hamburger tail, sunt culpa beef ribs ham hock irure. Ut bresaola flank consectetur pastrami sirloin short ribs meatball pork officia sausage in doner pork loin sed. Pastrami duis non pork loin magna, pig quis bresaola. Esse t-bone laborum, ex turkey proident flank aliquip occaecat qui sint non eiusmod strip steak spare ribs. Anim kielbasa pork chop id ut dolore commodo prosciutto doner magna.</p>
10. </div>
11. </article>
13. <article>
14. <h1>
15. <span class="embiggen">Love</span>
16. <div class="fancy amp"><span>&</span></div>
17. Marriage
18. </h1>
19. <div class="copy">
20. <p>Go together like a horse and carridge. Cillum pariatur ground round filet mignon capicola ad ham id doner sirloin beef ribs qui mollit pork chop. Laboris bacon officia tenderloin tempor, tongue excepteur tail occaecat meatloaf consectetur ham hock consequat ut. Frankfurter jerky enim irure salami aliqua. In pork loin meatball, ut ad in nisi turkey turducken mollit.</p>
22. <p>Filet mignon capicola aute short loin pork belly qui ball tip spare ribs do short ribs sint. Commodo dolore rump nostrud ball tip. Veniam in hamburger tail, sunt culpa beef ribs ham hock irure. Ut bresaola flank consectetur pastrami sirloin short ribs meatball pork officia sausage in doner pork loin sed. Pastrami duis non pork loin magna, pig quis bresaola. Esse t-bone laborum, ex turkey proident flank aliquip occaecat qui sint non eiusmod strip steak spare ribs. Anim kielbasa pork chop id ut dolore commodo prosciutto doner magna.</p>
23. </div>
25. </article>

CSS:

1. @import url(http://fonts.googleapis.com/css?family=Cinzel+Decorative:400,900);
3. body {
4. font-family: 'Cinzel Decorative', cursive;
5. background: url(http://s.cdpn.io/3/blurry-blue.jpg);
6. background-size: cover;
7. color: white;
8. }
10. h1 {
11. font-size: 3em;
12. text-align: center;
13. }
14. .embiggen {
15. font-size: 4em;
16. text-shadow: 0 0 40px #ffbab3;
17. }
18. article {
19. max-width: 600px;
20. overflow: hidden;
21. margin: 0 auto 50px;
22. }
24. .subtitle {
25. margin: 0 0 2em 0;
26. }
27. .fancy {
28. line-height: 0.5;
29. text-align: center;
30. }
31. .fancy span {
32. display: inline-block;
33. position: relative;
34. }
35. .fancy span:before,
36. .fancy span:after {
37. content: "";
38. position: absolute;
39. height: 5px;
40. border-bottom: 1px solid white;
41. border-top: 1px solid white;
42. top: 0;
43. width: 600px;
44. }
45. .fancy span:before {
46. right: 100%;
47. margin-right: 15px;
48. }
49. .fancy span:after {
50. left: 100%;
51. margin-left: 15px;
52. }
53. .amp {
54. margin: 0 0 0.25em 0;
55. }
56. .amp span {
57. font-size: 0.7em;
58. }
60. .copy {
61. font: 1em Georgia, Serif;
62. text-align: justify;
63. -moz-column-count: 2;
64. -moz-column-gap: 20px;
65. -webkit-column-count: 2;
66. -webkit-column-gap: 20px;
67. }
68. .copy p {
69. margin: 0 0 1em 0;
70. }

CSS

1. @import url(http://fonts.googleapis.com/css?family=Cinzel+Decorative:400,900);
3. body {
4. font-family: 'Cinzel Decorative', cursive;
5. background: url(http://s.cdpn.io/3/blurry-blue.jpg);
6. background-size: cover;
7. color: white;
8. }
10. h1 {
11. font-size: 3em;
12. text-align: center;
13. }
14. .embiggen {
15. font-size: 4em;
16. text-shadow: 0 0 40px #ffbab3;
17. }
18. article {
19. max-width: 600px;
20. overflow: hidden;
21. margin: 0 auto 50px;
22. }
24. .subtitle {
25. margin: 0 0 2em 0;
26. }
27. .fancy {
28. line-height: 0.5;
29. text-align: center;
30. }
31. .fancy span {
32. display: inline-block;
33. position: relative;
34. }
35. .fancy span:before,
36. .fancy span:after {
37. content: "";
38. position: absolute;
39. height: 5px;
40. border-bottom: 1px solid white;
41. border-top: 1px solid white;
42. top: 0;
43. width: 600px;
44. }
45. .fancy span:before {
46. right: 100%;
47. margin-right: 15px;
48. }
49. .fancy span:after {
50. left: 100%;
51. margin-left: 15px;
52. }
53. .amp {
54. margin: 0 0 0.25em 0;
55. }
56. .amp span {
57. font-size: 0.7em;
58. }
60. .copy {
61. font: 1em Georgia, Serif;
62. text-align: justify;
63. -moz-column-count: 2;
64. -moz-column-gap: 20px;
65. -webkit-column-count: 2;
66. -webkit-column-gap: 20px;
67. }
68. .copy p {
69. margin: 0 0 1em 0;
70. }