css - adding horizontal gradient next to a text -


this question has answer here:

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? here like. have done gradient affect @ bottom of it, cant on each side

.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

Popular posts from this blog

javascript - Using jquery append to add option values into a select element not working -

Android soft keyboard reverts to default keyboard on orientation change -

Rendering JButton to get the JCheckBox behavior in a JTable by using images does not update my table -