設置僞元素的寬度：在滾動時繼承原始元素的寬度

我試圖安排pre[data-code]:before的寬度爲100％，但是當我輸入pre元素中長的一行代碼時
和滾到一邊，我看到pre[data-code]:before切斷，它不好看。設置僞元素的寬度：在滾動時繼承原始元素的寬度

下面是代碼：

pre { 
 
    background-color: #233948; 
 
    font: bold 12px/15px Inconsolata, Monaco, Consolas, "Andale Mono", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; 
 
    color: #333; 
 
    border: 1px solid #f1c40f; 
 
    overflow: auto; 
 
    word-wrap: normal; 
 
    white-space: pre; 
 
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); 
 
    position: relative; 
 
    margin: 10px 0; 
 
    padding: 0 7px; 
 
} 
 
pre[data-code] { 
 
    padding: 3em 1em 7px; 
 
} 
 
pre[data-code]:before { 
 
    content: attr(data-code); 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    background-color: #95a5a6; 
 
    text-indent: 10px; 
 
    font: bold 12px/20px Arial, Sans-Serif; 
 
    color: #FFF; 
 
    padding: 7px 0; 
 
} 
 
pre[data-code="CSS"] { 
 
    color: #7DDECA; 
 
    border-color: #16a085; 
 
} 
 
pre[data-code="CSS"]:before { 
 
    background-color: #16a085; 
 
}

<pre data-code="CSS"> 
 
pre{background-color:#233948;font:bold 12px/15px Inconsolata,Monaco,Consolas,"Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;color:#333;border:1px solid #f1c40f;overflow:auto;word-wrap:normal;white-space:pre;box-shadow:0 1px 2px rgba(0,0,0,0.2);position:relative;margin:10px 0;padding:0 7px} 
 
</pre>

如何解決這個問題呢？

來源

2016-07-25 Dyana Putry

你可以作弊。

請勿在pre標記上設置背景色，而應使用垂直漸變來模擬該背景。

* { 
 
    box-sizing: border-box; 
 
} 
 
pre { 
 
    background: linear-gradient(to bottom, #95a5a6, #95a5a6 32px, #233948 32px); 
 
    font: bold 12px/15px Inconsolata, Monaco, Consolas, "Andale Mono", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; 
 
    color: #333; 
 
    border: 1px solid #f1c40f; 
 
    overflow: auto; 
 
    word-wrap: normal; 
 
    white-space: pre; 
 
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); 
 
    position: relative; 
 
    margin: 10px 0; 
 
    padding: 0 7px; 
 
} 
 
pre[data-code] { 
 
    padding: 3em 1em 7px; 
 
} 
 
pre[data-code]:before { 
 
    content: attr(data-code); 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    text-indent: 10px; 
 
    font: bold 12px/20px Arial, Sans-Serif; 
 
    color: #FFF; 
 
    padding: 7px 0; 
 
} 
 
pre[data-code="CSS"] { 
 
    color: #7DDECA; 
 
    border-color: #16a085; 
 
    background: linear-gradient(to bottom, #16a085, #16a085 32px, #233948 32px) 
 
}

<pre data-code="CSS"> 
 
pre{background-color:#233948;font:bold 12px/15px Inconsolata,Monaco,Consolas,"Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;color:#333;border:1px solid #f1c40f;overflow:auto;word-wrap:normal;white-space:pre;box-shadow:0 1px 2px rgba(0,0,0,0.2);position:relative;margin:10px 0;padding:0 7px} 
 
</pre>

來源

2016-07-25 14:18:14

是啊..非常感謝你非常有幫助，我試圖和它的工作。因爲它看起來更好，我很高興 –

設置僞元素的寬度：在滾動時繼承原始元素的寬度

回答

相關問題