在文本旁边添加水平渐变

Question

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

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

Answer 1

实现此目的的基本方法是：

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>

在文本旁边添加水平渐变

adding horizontal gradient next to a text

css

gradient