如何添加僞元素漸變效果

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

回覆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填充用於模擬邊界。

Answer 2

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