爲什麼我的::工作之前，而不是我::之後不。幫助css hivemind

今天早上處理一些排版的東西。怎麼只有我的.quote :: before工作。 http://codepen.io/samducker/pen/WpoBOB 爲什麼我的::工作之前，而不是我::之後不。幫助css hivemind

編輯：當我調整它的大小時，它開始出現在文本換行時的第一行下面。

<h1 class="quote">&ldquo;Drink better not more&rdquo;</h1> 
<p><span class="first-letter">A</span> week designed for cocktail lovers, Loves Cocktails is an exciting new 7-day 
long festival arriving in Nottingham this April.</p> 

.quote { 
    font-family: $serif-font; 
    text-align: center; 
    font-size: 4rem; 
    padding: 0.3em 0em; 
} 
.quote::before, .quote::after { 
    content: ""; 
    position: absolute; 
    left: 50%; 
    -webkit-transform: translateX(-50%); 
    transform: translateX(-50%); 
    height: 8px; 
    width: 32px; 
    background: #ec3723; 
    } 

p { 
    max-width: 40em; 
    margin: auto; 
} 

.first-letter { 
    font-size: 3rem; 
    margin: 20px; 
    float: left; 
}

來源

2017-03-08 Sam Ducker

如果你在談論你的::after元素被渲染上調整大小是因爲你不使用top財產爲您absolute定位的元素。你需要做的是這樣

.quote { 
    position: relative; 
    /* other properties here */ 
} 

.quote::before, 
.quote::after { 
    top: 0; 
    /* other properties here */ 
}

Demo

默認情況下，absolute定位的元素渲染旁邊的文字，所以當它包裹，既然你沒有top定義，您::after僞被打破。爲了解決這個問題，我定義了top，這樣無論你的文本換行多少，僞元素都能保持原位。

正如您評論。在這裏，我添加了另一個聲明，試圖拉下僞造的::after。另外請注意，我設置top: auto;爲::after，因爲我們最初設置的是top: 0;。

Demo 2

來源

2017-03-08 11:34:15

感謝您的答覆我期待下面創建（之後）的文本，以便鏡像到它上面的一個小行。不要刪除調整大小。 –

明白了，等待將會修復 –

@ SamDucker完成 –

爲什麼我的::工作之前，而不是我::之後不。幫助css hivemind

回答

相關問題