为什么我的::工作之前，而不是我::之后不。帮助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

回答

相关问题