Heading with Horizontal Line on Either Side

heading with horizontal line on either side

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>

CSS technique for a horizontal line with words in the middle

This is roughly how I'd do it: the line is created by setting a border-bottom on the containing h2 then giving the h2 a smaller line-height. The text is then put in a nested span with a non-transparent background.

h2 {   width: 100%;    text-align: center;    border-bottom: 1px solid #000;    line-height: 0.1em;   margin: 10px 0 20px; } 
h2 span {     background:#fff;     padding:0 10px; }

<h2><span>THIS IS A TEST</span></h2><p>this is some content other</p>

how to add a horizontal line after each heading in an HTML with only CSS

The correct way to add a line after a heading IS to use CSS not a <hr/> element. note that H elements are block level elements (unless you are styling them to be inline or are using display: flex on the parent container, so the border-bottom will extend the full width of thecontainer.

This can be applied individually to any h element - or to them all by combining all h elements into a single style declaration.

h1 {  padding-bottom: 8px;  margin-bottom: 8px;  border-bottom: solid 1px #e1e1e1;}

<h1>This is a heading</h1>

Title with dynamic horizontal lines on the side

You can use pseudo element and rgba() colors, this is a common way to do it : DEMO

HTML test

<header>
  <h1> MY CENTERED TEXT</h1>
</header>

CSS test

header {
  padding:3em;
  background:url(http://lorempixel.com/600/50/nightlife) ;
  background-size: cover;
}
h1 {
  background:rgba(0,0,0,0.5);
  color:white;
  padding:1em 0;
  text-align:center;
  overflow:hidden;
}
h1:before, h1:after {
  content:'';
  width:100%;
  border-bottom:lightgray solid;
  display:inline-block;
  vertical-align:middle;
}
h1:before {
  margin-left:-100%;}
h1:after {
  margin-right:-100%;}

CSS horizontal line on one side of text

With your current HTML structure you can use Flexbox and :after, :before pseudo elements to do this.

h2 {  display: flex;  align-items: center;  justify-content: center;}h2 span {  background: #fff;  margin: 0 15px;}h2:before,h2:after {  background: black;  height: 2px;  flex: 1;  content: '';}h2.left:after {  background: none;}h2.right:before {  background: none;}

<h2 class="left"><span>THIS IS A TEST</span></h2><h2 class="right"><span>LOREM</span></h2><p>this is some content</p>

Horizontal line by header right side

I think I would use a background-image in the header row that is overwritten by a background-color of the text. Something like this:

  <div id="newHead"><div>the header text</div></span>

  #newHead {
    background: white url(http://tidesonline.nos.noaa.gov/images/black_line.jpg) center left repeat-x;
  }
  #newHead div {
    background-color: white;
    display: inline-block;
    padding-right: 10px;
  }

Here's a jsfiddle example: http://jsfiddle.net/mVqY6/

This will only work if the text is not too long and if the text is positioned over the background image. In that case you'll need to do some tweaking.

Heading with Horizontal Line on Either Side