css - adding horizontal gradient next to a text -
this question has answer here:
- line before , after title on image 2 answers
i have p tag text in it, want add 2 horizontal line on each side of text gradient affect. issue dont know how lines on each side of text. need use span?
.blkbar { background: url("graphics/bkgd.jpg"); background-repeat: no-repeat; height: 60px; } .blkbar p { font-size: 24px; padding: 15px 0px 15px 0px; } .blkbar_hl { height: 1px; background: #d4c293; }
<div class="col_full blkbar"> <span class="blkbar_hl"></span> <p>call 374 60 275-737 reserve luxury suite.</p> </div>
a basic approach purpose, is:
h4:before { content: ""; display: inline-block; width: 60px; height: 3px; background: -webkit-linear-gradient(right, #000 0%, transparent 100%); } h4:after { content: ""; display: inline-block; width: 60px; height: 3px; background: -webkit-linear-gradient(left, #000 0%, transparent 100%); }
<h4>hello world</h4>
Comments
Post a Comment