如何保持一个滚动元素内的伪元素？

Question

我怎样才能得到这样的效果：

<pre class="default prettyprint prettyprinted" data-codetitle="homepage.html" style=""><code> 
body{ 
    position: relative; 
    @include background(linear-gradient(left, lighten($me, 11%), lighten($me, 11%) 
    $half, $darkbackground $half, $darkbackground)); 
    color: $text; 
    width: 100%; 
    height: 100%; 
    @include breakpoint(baby-bear) { 
    @include background(linear-gradient(left, lighten($me, 11%), lighten($me, 11%) 
    45%, $darkbackground 45%, $darkbackground)); 
    } 
} 
</span></code></pre> 

我需要使用数据标签作为标题：

.prettyprint { 
    margin: 0 0 0 0.5%; 
    border-left: 2px solid #ce8f80; 
    overflow: auto; 
    position: relative; 
    width: 300px; 
} 
.prettyprint:before { 
    content: attr(data-codetitle); 
    background: #ce8f80; 
    display: block; 
    width: 100%; 
} 

这是result。问题是，当您滚动时，:before元素也会滚动。有没有办法保持这个元素的固定。我尝试了不同的变化，但我不能得到它的工作。

感谢

Answer 1

试试这个：

.prettyprint:before { 
    content: attr(data-codetitle); 
    background: #ce8f80; 
    display: block; 
    position: fixed; 
    width: inherit; 
} 

设置position: fixed保持元件从下面的滚动，然后设置width: inherit保持伪元素的宽度相同的父元素。

小提琴参考：http://jsfiddle.net/audetwebdesign/r8aNC/2/