スクロールした要素内に擬似要素を固定する方法は？

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/