在文本旁边添加水平渐变

Question

我有一个带有文本的p标签，我希望在文本的每一侧添加两条水平线，并带有渐变效果。 我的问题是我不知道如何在文本的每一侧获得线条。 我需要使用跨度吗？

＆＃13;

＆＃13;

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

＆＃13;

<div class="col_full blkbar">
    <span class="blkbar_hl"></span> 
    <p>Call 374 60 275-737 Now To Reserve A Luxury Suite.</p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

为此目的的基本方法是：

＆＃13;

＆＃13;

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

＆＃13;

<h4>hello world</h4>

＆＃13;

＆＃13;

＆＃13;