adding horizontal gradient next to a text

Question

I have a p tag with a text in it, which I want to add two horizontal line on each side of the text with a gradient affect. My issue is that I dont know how to get the lines on each side of the text. Do I need to use a span? Here is what I would like to look like. I have done gradient affect at the bottom of it, but I cant do it 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 Now To Reserve A Luxury Suite.</p>
</div>

considering the hassle and the size of the lines in question this would probably be one of the few times i'd use an image. — marblewraith, Jul 14 '15 at 05:37
I have closed it as a dupe since this is a near enough duplicate of the linked question. You could modify the accepted answer to use gradients (or) you could have a look at the **Line with Gradient** sample in my answer. If you are unable to put them to use and get stuck somewhere, please update the question with more details, leave me a comment and I will reopen it for you. — Harry, Jul 14 '15 at 05:42

score 2 · Accepted Answer · edited Jul 14 '15 at 05:43

2

A basic approach for this 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>

edited Jul 14 '15 at 05:43

answered Jul 14 '15 at 05:38

hmak.me

3,770
1
20
33

1

You should use `vertical-align:middle` to vertically center those pseudo elements. – Jul 14 '15 at 05:44
Thank you @HosseinMaktoobian – JFA Jul 14 '15 at 05:52

adding horizontal gradient next to a text

1 Answers1