Css Technique For a Horizontal Line With Words in the Middle

h5 {  width: 100%;  text-align: center;  border-left: 1px solid #000;  border-right: 1px solid #000;  margin: 10px 0 20px;  position: relative;}h5:before, h5:after {  content: '';  position: absolute;}h5:before {  top: 50%;  background: #000;  height: 1px;  left: 0; right: 0;}h5:after {  background: #fff;  top: calc(50% + 1px);  bottom: 0;  left: -1px; right: -1px;}span {  background: #FFF;  padding: 0 10px;  position: relative;  z-index: 1;}

<h5><span>Refer to Info above</span></h5>

CSS technique for a horizontal line to the left of text with text align centre

Use pseudo-elements to do so:

.sidebar-first-item {
  position: relative;
}

.sidebar-first-item:before {
  content: '';
  position: absolute;
  width: 45%;
  height: 5px;
  background-color: red;
  top: 50%;
  left: 0%;
}

CodePen: https://codepen.io/manaskhandelwal1/pen/xxEaQYg

How to make horizontal lines with words in the middle using CSS?

If I understand your question correctly <strike> tag could be used.

The <strike> tag is not supported in HTML5. For HTML5 use <del> tag instead.

If you meant horizontal lines with words in the middle... Try this:

HTML:

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

CSS:

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

JSFiddle:

http://jsfiddle.net/S5y2x/

Credits for above code: https://stackoverflow.com/a/5214204/3739658

I tested it on Firefox and Chrome

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>

<h2><span  class="line-center">Test</span></h2>

.line-center{
    margin:0;padding:0 10px;
    background:#fff;
    display:inline-block;
}
h2{

    text-align:center;
    position:relative;
    z-index:2;

}
h2:after{
    content:"";
    position:absolute;
    top:50%;
    left:0;
    right:0;
    border-top:solid 1px red;
    z-index:-1;
}

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>

<h3><span>My latest work</span></h3>

h3 {
position:relative;
text-align:center;}

h3 span {
    display:inline-block;
    padding:0 10px;
    background:#fff;
}
h3:before {
    content:"";
    display:block;
    position:absolute;
    z-index:-1;
    left:0;
    right:0;
    top:50%;
    height:1px;
    background:#ccc;
}