स्क्रोल तत्व के भीतर एक छद्म-तत्व कैसे तय किया जाए?

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/