Come mantenere fisso uno pseudo-elemento all'interno di un elemento a scorrimento?

Question

come posso ottenere questo effetto:

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

ho bisogno di usare il tag di dati come intestazione:

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

Questa è la result. Il problema è che quando si scorre, l'elemento :before scorre anche. C'è un modo per mantenere fisso questo elemento. Ho provato diverse varianti ma non riesco a farlo funzionare.

Grazie

Answer 1

provate questo:

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

Set position: fixed per mantenere l'elemento di seguire il rotolo, e quindi impostare width: inherit per mantenere lo pseudo-elemento della stessa larghezza dell'elemento genitore.

Codice di riferimento: http://jsfiddle.net/audetwebdesign/r8aNC/2/