Question

为什么在这些块引用中的:: after元素上设置display:none或content:none导致:: before元素被半隐藏，除了第一个元素出于某种原因？您可以在代码段中看到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>

如果您愿意，这里是一个小提琴：https://jsfiddle.net/nsr0m3oc

Answer 1

这似乎与您要应用于：after和：before的open-quote和close-quote的行为有关。

如果您确实想要open-quote，而不想要close-quote。您只需要添加no-close-quote。

就像这样：

html blockquote::after {
    content: no-close-quote;
    right: .155em;
    z-index: 1;
}

此外，请记住删除放在{after之后的display: none;，否则将无法正常工作。

让我知道它是否有帮助：）

编辑评论

由于尚未在blockquote元素上定义quotes属性，因此默认值为quotes: "“" "“" "'" "'";。注意：每种语言的默认值都不同。参见lang attribute。

quotes属性中的两个第一引号将始终用于非嵌套引号，因此在这种情况下将使用"“" "“"。

最后两个引号将始终用于嵌套引号，因此在这种情况下将使用"'" "'"。

在您的情况下，您删除了所有右引号。因此，从技术上讲，您的第一个报价从未关闭。由于从未关闭过，因此以下所有引号在技术上都会成为嵌套引号-因此"'" "'"用于除第一引号之外的所有引号。

通过添加content: no-close-quote;（如上所述），您可以告诉浏览器，即使它不应该显示右引号。引用仍应关闭。因此，如果添加content: no-close-quote;，则第一行之后的所有引号将使用"“" "“"而不是"'" "'"。

希望我的澄清是有道理的。请告诉我是否可以。

为什么CSS对:: after的更改也会影响:: before？

1 个答案: