[英]Why do CSS changes to ::after affect ::before as well?
Why is it that setting either display:none
or content:none
on the ::after element in these blockquotes causes the ::before element to be half-hidden, except in the first element for some reason?为什么在这些块引用中的 ::after 元素上设置
display:none
或content:none
会导致 ::before 元素半隐藏,但出于某种原因在第一个元素中除外? You can see in the snippet that display:none
is set on the ::after pseudoelement and if you remove it the quotes show up properly.您可以在片段中看到
display:none
在 ::after 伪元素上设置,如果删除它,引号会正确显示。
let quotes = document.querySelector('#quotes'), json = [ {"author_name":"Socrates", "relative_time_description":"2395 years ago", "text":"Few persons ever reflect, as I should imagine, that from the evil of other men something of evil is communicated to themselves."}, {"author_name":"Socrates", "relative_time_description":"2395 years ago", "text":"Then must we not infer that all these poetical individuals, beginning with Homer, are only imitators; they copy images of virtue and the like, but the truth they never reach? The poet is like a painter who, as we have already observed, will make a likeness of a cobbler though he understands nothing of cobbling; and his picture is good enough for those who know no more than he does, and judge only by colors and figures."}, {"author_name":"Damon", "relative_time_description":"circa 3000 years ago", "text":"...when modes of music change, the fundamental laws of the State always change with them."}]; Object.keys(json).forEach(function(key){ let r = json[key], tpl = document.querySelector('#tpl').content.cloneNode(true); tpl.querySelector('blockquote').childNodes[0].nodeValue = r.text; tpl.querySelector('.author').textContent = r.author_name; tpl.querySelector('.ago').textContent = r.relative_time_description; quotes.appendChild(tpl); });
html{font-size:20px;} #quotes { list-style: none; margin: 1em 0; padding: 1em 0; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; align-items: stretch; } #quotes li { flex: 1 1 auto; max-width: 10em; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: stretch; align-items: stretch; } html blockquote { position: relative; margin: 1em 0; padding: .618em 1.236em; border-left: 6px solid #bf0a30; background: #002868; color: #e6e6e6; } .quote { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: stretch; align-items: stretch; font-size: .8em; } cite{padding:1em 0 0;} cite p{margin:0;} html blockquote::before, html blockquote::after { position: absolute; top: 33%; font-size: 1em; font-weight: 700; } html blockquote::before { content: open-quote; left: .155em; } html blockquote::after { content: close-quote; right: .155em; } .quote::before,.quote::after{top:auto} .quote::after{bottom:0; display:none;}
<ul id="quotes"> </ul> <template id="tpl"> <li> <blockquote class="quote"> <cite> <p class="author"></p> <p class="ago"></p> </cite> </blockquote> </li> </template>
Here's a fiddle if you prefer that: https://jsfiddle.net/nsr0m3oc如果您愿意,这里有一个小提琴: https : //jsfiddle.net/nsr0m3oc
It seems to have something to do with the behavior of the open-quote
and close-quote
, which you are applying to :after and :before.它似乎与
open-quote
和close-quote
的行为有关,您将其应用于 :after 和 :before。
If you do want an open-quote
, but NOT close-quote
.如果你确实想要一个
open-quote
,但不是close-quote
。 You simply need to add no-close-quote
instead.您只需要添加
no-close-quote
。
Just like this:像这样:
html blockquote::after {
content: no-close-quote;
right: .155em;
z-index: 1;
}
Also, remember to remove the display: none;
另外,记得去掉
display: none;
that you put on :after, or else this wont work.你穿上 :after ,否则这将不起作用。
Let me know if it helped :)让我知道它是否有帮助:)
EDIT TO ANSWER COMMENT编辑以回答评论
Because you haven't defined a quotes
property on your blockquote
element, the default value becomes: quotes: "“" "“" "'" "'";
因为您还没有在
blockquote
元素上定义quotes
属性,所以默认值变为: quotes: "“" "“" "'" "'";
. . Note: the default value is different for each language.
注意:每种语言的默认值不同。 See lang attribute .
参见lang 属性。
The two first quotation marks in the quotes
property will always be used on non-nested quotes, so "“" "“"
will be used in this case. quotes
属性中的前两个quotes
将始终用于非嵌套引号,因此在这种情况下将使用"“" "“"
。
The two last quotation marks will always be used on nested quotes, so "'" "'"
will be used in this case.最后两个引号将始终用于嵌套引号,因此在这种情况下将使用
"'" "'"
。
In your case you removed all closing quotes.在您的情况下,您删除了所有结束引号。 So technically your first quote never got closed.
因此,从技术上讲,您的第一个报价从未关闭。 Because it was never closed, all following quotes technically became nested quotes - therefore
"'" "'"
was used for all quotes, except for the first quote.因为它从来没有被关闭过,技术上所有后面的引号都变成了嵌套引号——因此
"'" "'"
被用于所有的引号,除了第一个引号。
By adding content: no-close-quote;
通过添加
content: no-close-quote;
, as I suggested above, you tell the browser that even though it shouldn't render a close-quote. ,正如我上面建议的那样,您告诉浏览器即使它不应该呈现关闭引用。 The quote should still be closed.
报价仍应关闭。 Therefore if you add
content: no-close-quote;
因此,如果您添加
content: no-close-quote;
, all quotes following the first will use "“" "“"
instead of "'" "'"
. ,第一个后面的所有引号都将使用
"“" "“"
而不是"'" "'"
。
Hopefully my clarification made sense.希望我的澄清是有道理的。 Please let me know if it did.
如果有,请告诉我。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.