Question

我创建了一个Wordpress网站，并在主页的about部分添加了一个blockquote元素。

我使用：before和：after在我的blockquote元素中插入一个qoute unicode，但问题是：在伪引用后没有响应。

我插入了一个顶部：45％右：临时34％，它仅适用于最小宽度：1200px屏幕尺寸。请帮我找到解决方案。这是我的下面的CSS，

blockquote {
  display:block;
  background: #fff;
  padding: 20px 20px 20px 75px;
  margin: 0 0 20px;
  position: relative;
  width: 100%;

  /*Font*/
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 36px;
  line-height: 1.2;
  color: #242424;
}

blockquote::before{
  content: "\201C"; 
  font-family: Georgia, serif;
  font-size: 100px;
  font-weight: bold;
  color: #FFC107;

  /*Positioning*/
  position: absolute;
  left: 10px;
  top: -10px;
 }

blockquote::after{
  content: "\201D";
  font-family: Georgia, serif;
  font-size: 100px;
  font-weight: bold;
  color: #FFC107;

 position: absolute;
 top: 45%;
 right: 34%;
}

此外，这里有网站链接以明确说明。

http://www.windoway.com.ph/

先谢谢你们！

Answer 1

我不确定你的意思是“没有响应”（“响应”不是一个非常明确的术语......），但我认为你的意思是插入的::after元素的位置仅在特定窗口大小时才正确？

开头引号始终显示在相对于文本的相同位置，但结束标记位于<blockquote>元素的边缘，而不是文本内部的文本末尾。在某些窗口大小处，当文本环绕在文本的最后一个单词和元素的边缘之间留下大的间隙时，引号与文本分开。由于字体较大，情况会变得更糟。

在您的具体情况下，一个简单的解决方案是将blockquote::after选择器更改为blockquote p::after，并删除top:45%和right:34%属性。然后在文本末尾插入::after元素，这意味着它的位置会随着文本重排而改变。

Answer 2

我只需添加以下内容即可解决类似问题：

width: inherit;

如何制作：经过伪元素响应

2 个答案: