-=:Heading with a decorative vertical line=:-

Question

-=:Heading with a decorative vertical line=:-

Currently, I am working on a CSS project that requires page titles (headings) to be centered with horizontal lines positioned vertically on both sides. Additionally, there is a background image on the page which means the title's background must be transparent.

I have successfully centered the title and used pseudo-class to create the line. However, my challenge lies in making the line disappear when it crosses the text of the title.

One solution I considered was using a background gradient that turns transparent where the words are located. But due to varying title lengths, determining where to place the stops would be problematic.

Below is the current CSS code snippet:

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%;
}

This is my progress so far: http://jsfiddle.net/XWVxk/1/

Is it possible to achieve this effect using pure CSS without any additional HTML elements?

html css pseudo-class

Answer 1

Answer №1

Check out this . That's where you'll find the solution.

Here is your revised original code:

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: Unfortunately, the article is no longer available online. However, here is the last archived version: http://web.archive.org/web/20140213165403/http://blog.goetter.fr/post/36084887039/tes-pas-cap-premiere-edition

Answer 2

Check out this . That's where you'll find the solution.

Here is your revised original code:

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: Unfortunately, the article is no longer available online. However, here is the last archived version: http://web.archive.org/web/20140213165403/http://blog.goetter.fr/post/36084887039/tes-pas-cap-premiere-edition

Answer 3

Answer №2

Wish I had this solution a few days ago, but unfortunately, the accepted answer doesn't work in IE.

After some tinkering, here's what I came up with: it works flawlessly on all major browsers (compatible with IE8 and above).

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>

Answer 4

Wish I had this solution a few days ago, but unfortunately, the accepted answer doesn't work in IE.

After some tinkering, here's what I came up with: it works flawlessly on all major browsers (compatible with IE8 and above).

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>

Answer 5

Answer №3

Here's a possible solution:

.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>

This code places the text over the line with a background color and padding to hide the line behind the text block.

Answer 6

Here's a possible solution:

.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>

This code places the text over the line with a background color and padding to hide the line behind the text block.

-=:Heading with a decorative vertical line=:-

Answer №1

Answer №2

Answer №3

Similar questions

Eliminating the need for the horizontal scroll bar on the webpage

Persistent Footer while scrolling on Internet Explorer

How come the dark grey in CSS appears to be lighter than the standard grey hue?

Struggles with arranging HTML header components

What could possibly be causing the 500 server error in PHP?

How can I retrieve the reference number of an item by clicking a button within a list item in an unordered

Expanding the padding within a box results in an increase in the overall height of the table row that encapsulates it

Ways to replace CSS classes created using makeStyles

What is the strategy to load a div exclusively when triggered by a click event, instead of loading it

"Implemented a user-friendly header and footer that stick to the top and

Displaying and Concealing Table Rows using Javascript

What is the mechanism through which a flexbox enlarges to accommodate its overflowing child elements?

Exploring the Pathways of a Website's Architecture

In need of a solution for this peculiar problem with an html table and css. Let's

Tips for updating the content of a div with fresh data using a slideshow effect in jQuery

Tips for accurately placing the iOS audio player in the footer section

Footer that is adhered to the bottom of the page with a

Automatically customizable CSS border thickness

What is the best way to continuously add items to a div until their heights are equal?

How can one effectively locate a specific element in an HTML document?