Str8upNate
New Member
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:` \[code\]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%; } \[/code\]`Here is where I'm at: http://jsfiddle.net/XWVxk/1/Can this be done with CSS without adding any extra HTML?