Jak utrzymać pseudoelement w przewijanym elemencie?

Question

Jak mogę uzyskać ten efekt:

<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> 

muszę użyć tagu danych jako nagłówek:

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

To result. Problem polega na tym, że podczas przewijania, element :before przewija się również. Czy istnieje sposób na utrzymanie tego elementu na stałe. Próbowałem różnych odmian, ale nie mogę go uruchomić.

Dzięki

Answer 1

Spróbuj tego:

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

Set position: fixed zachować element z następujących zwój, a następnie ustawić width: inherit zachować pseudo-element tej samej szerokości jako elementu nadrzędnego.

Numer fiddle: http://jsfiddle.net/audetwebdesign/r8aNC/2/