create a css format with socil media icon [duplicate] - html

Question

I'm trying to draw a line using CSS and show text/image in the middle of the line.
.featured-images {
color: #666666;
border: 2px solid #333333;
}
<p class="featured-images">Featured</p>
This is what I want to do:
and

Answer 1

Wrap the text inside a span and use a :pseudo-element for the line.
Position the line(:pseudo-element) behind the span using z-index: -1, so that you could move around the text without having to worry about the line.
.featured-images {
position: relative;
color: #666666;
border: 2px solid #333333;
padding: 0 10px 0 30px;
}
.featured-images span {
color: #666666;
background: white;
padding: 0 10px;
}
.featured-images:after {
content: '';
position: absolute;
width: 100%;
height: 2px;
background: #666666;
left: 0;
top: 50%;
transform: translateY(-50%);
z-index: -1;
}
<p class="featured-images"><span>Featured</span></p>
Replicating the following:
You could use repeating-linear-gradient to do this.
body {
background: #E7EAE3;
}
.featured-images {
position: relative;
color: #666666;
padding: 0 10px 0 30px;
overflow: hidden;
}
.featured-images span {
color: #517575;
background: white;
padding: 0 10px;
}
.featured-images:after {
content: '';
position: absolute;
width: 120%;
height: 100%;
background: -webkit-repeating-linear-gradient(180deg, #463A3A 10px, #F2F2F2 10px, #F2F2F2 11px, #463A3A 11px, #463A3A 20px) repeat-x;
background: -moz-repeating-linear-gradient(180deg, #463A3A 10px, #F2F2F2 10px, #F2F2F2 11px, #463A3A 11px, #463A3A 20px) repeat-x;
background-size: 10px 31px;
margin-left: -30px;
transform: skew(-45deg);
left: 0;
z-index: -1;
}
<p class="featured-images"><span>Featured</span>
</p>
Using image instead of text.
.featured-images {
position: relative;
color: #666666;
border: 2px solid #333333;
padding: 0 10px 0 30px;
}
.featured-images span {
display: block;
width: 80px;
height: 13px;
background: url(http://lorempixel.com/80/13) no-repeat white 10px 0;
padding: 0 10px;
}
.featured-images:after {
content: '';
position: absolute;
width: 100%;
height: 2px;
background: #666666;
left: 0;
top: 50%;
transform: translateY(-50%);
z-index: -1;
}
<p class="featured-images"><span></span></p>

Answer 2

Something like this? JSFiddle
CSS:
.featured-images {
color: #666666;
}
p span {
margin:0;padding: 0 10px;
background: #FFFFFF;
display: inline-block;
}
p {
padding-left: 20px;
position: relative;
z-index: 2;
}
p:after {
content: "";
position: absolute;
top: 50%;
left: 0;
right: 0;
border-top: solid 1px #666666;
z-index: -1;
}

Answer 3

Demo 1
:root{padding: 40px}
p{
position: relative;
margin:40px auto;padding:0 10px;
background:white;
display:inline-block;
}
p:before,p:after{
content:"";
position:absolute;
z-index:-1;
right:0
}
p:before{
top:-4px;
left: -24px;
height: 24px;
width: 480px;
border:solid 1px #666666
}
p:after{
top: 50%;
width: 466px;
left: -16px;
border-top: solid 1px #666666
}
<p class="featured-images">Featured</p>
Use Pseudo element
:root{padding: 40px}
p{
position: relative;
margin:40px auto;padding:0 10px;
background:white;
display:inline-block;
}
p:before,p:after{
content:"";
position:absolute;
z-index:-1;
left:-14px;
right:0;
width: 480px
}
p:before{
top:-4px;
height: 24px;
border:solid 1px #666666
}
p:after{
top:50%;
border-top:solid 1px #666666
}
<p class="featured-images">Featured</p>
Demo 2
p{
position: relative;
margin:0;padding:0 10px;
background:white;
display:inline-block;
}
p:after{
content:"";
position:absolute;
top:50%;
left:-14px;
right:0;
width: 100vw;
border-top:solid 1px #666666;
z-index:-1;
}
<p class="featured-images">Featured</p>
Update
:root{padding: 40px}
p{
position: relative;
margin:40px auto;padding:0 10px;
background:white;
display:inline-block;
}
p:before,p:after{
content:"";
position:absolute;
z-index:-1;
right:0
}
p:before{
top:-4px;
left: -24px;
height: 24px;
width: 480px;
border:solid 1px #666666;
background-color: gray;
background-image: repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(255,255,255,.5) 2px, rgba(255,255,255,.5) 6px)
}
}
p:after{
top: 50%;
width: 466px;
left: -16px;
border-top: solid 1px #666666
}
<p class="featured-images">Featured</p>

Answer 4

Result http://jsfiddle.net/p8jdzqvL/embedded/result/
<div style="height: 2px; background-color: black; text-align: center">
<span style="background-color: white; position: relative; top: -0.5em;">
Stay Connected
</span>
</div>