在文本旁边添加水平渐变[重复]答案

【问题标题】：adding horizontal gradient next to a text [duplicate]在文本旁边添加水平渐变[重复]
【发布时间】：2015-10-02 14:20:10
【问题描述】：

我有一个带有文本的 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>

【问题讨论】：

考虑到问题的麻烦和线条的大小，这可能是我使用图片的少数几次之一。
我已将其作为骗子关闭，因为这是链接问题的足够重复。您可以修改接受的答案以使用渐变（或）您可以查看我的答案中的 Line with Gradient 示例。如果您无法使用它们并卡在某个地方，请更新问题并提供更多详细信息，给我留言，我会为您重新打开它。

标签： css gradient

【解决方案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%);
}

&lt;h4&gt;hello world&lt;/h4&gt;

【讨论】：

您应该使用vertical-align:middle 将这些伪元素垂直居中。
谢谢@HosseinMaktoobian