如何添加伪元素渐变效果

Question

你好我怎么能从左到右添加一个伪元素渐变效果。 我正在尝试：

.divider p:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 25%;
    z-index: -1;
    border-top: 1px solid #666666;
}

HTML

<div class="divider">
 <p><span>Featured</span></p>

 </div><!-- end of divider -->

上面的代码画了一条尖锐的线，但我想创建这样的东西：

我的整个代码是：

.divider {
color: #666666;
}
.divider p span {
margin:0;padding: 0 10px;
background: #FFFFFF;
display: inline-block;
}
.divider p {
padding-left: 20px;
position: relative;
z-index: 2;   
}
.divider p:after {
content: "";
position: absolute;
top: 50%;
left: 0;
right: 25%;
z-index: -1;
border-top: 1px solid #666666;
}

Answer 1

.box:before,
.box:after {
  content: "";
  position: absolute;
  display: block;
  left: -10px;
  width: 1px;
  height: 50%;
}

.box:before {
  top: 0;
  background: linear-gradient(to top, #333 0%, transparent 100%);
}

.box:after {
  bottom: 0;
  background: linear-gradient(to bottom, #333 0%, transparent 100%);
}

Answer 2

回应Bergmann对原始答案的质疑：

你可以用很少的额外css来模拟实体渐变边界。

HTML：

<div class="element">
    <div class="content">
        Content
    </div>
</div>

CSS：

.element {
    position: relative;
    padding: 5px;
}
.element:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 100%;
    background-image: linear-gradient(90deg, #000 0%, #fff 100%);
}
.content {
    position: relative;
    background-color:white;
}

http://jsfiddle.net/nu9zmxvw/

在此示例中，.element填充用于模拟边框。