-=: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

Creating unique page styles using global styles in Next.js

Is it possible for you to generate an array containing only one element?

JavaScript button for displaying and hiding all content in one click

The Safari browser restricts interaction with password inputs but allows interaction with other types of input fields

Animating CSS styles in Vue.js based on JavaScript triggers

Requesting HTML content from a PHP file using JQuery Ajax callback

What could be causing my jQuery script to not load properly on the first attempt?

The background color in CSS remains stagnant, refusing to change despite

The drop-down does not move above the subsequent div when focused

Leverage JSON data in JavaScript

Tips for creating a clickable A href link in the menu bar that triggers an accordion to open in the body when clicked - html

Incorporating JavaScript into a pre-existing HTML and CSS user interface

AngularJS templateUrl changes on page refresh``

Restricted footage accessible through RESTful API

Three Divs stacked on top of each other, with varying heights based on

What is the reason behind modern browsers continuing to add spaces between inline blocks when there is whitespace present?

Utilizing media queries and JQuery to display a variety of menus based on screen

What is the best way to make a div pull its background image directly from the internet instead of using the cached version?

adjusting array based on screen size fluctuations

Using Jquery to select a specific id for an input element that is a checkbox