第一个字母伪元素无法在 CSS 中使用引号符号正常工作答案

【问题标题】：First-letter pseudo-element not working properly with quote sign in CSS第一个字母伪元素无法在 CSS 中使用引号符号正常工作
【发布时间】：2016-05-06 03:46:28
【问题描述】：

我正在尝试设置pull-quote div 标签的样式。我想设置引号" 的样式，使其比语句的其余部分大。

我想过使用first-letter 伪元素。但是，当我这样做时，它无法正常工作。以下是我尝试过的案例：

如果我这样写句子："This is a test,("和T之间没有空格，那么"T看起来都很大。

如果我在它们之间写一个空格，它们都不会变大。

我的问题是：有没有办法让" 变得更大？

这是我使用的html代码：<div class="pullquote-right">"this is a test</div>

CSS：

.pullquote-right {
display: inline-block;
max-width: 350px;
float: right;
padding-left: 15px;
margin-left: 25px;
border-left: #3b5998;
border-left-width: thick;
border-left-style: solid;   
font-style: italic;
color: darkgray;
font-size:115%;}

.pullquote-right::first-letter {font-size: 200%;}

谢谢。

【问题讨论】：

感谢 BoltClock 的编辑。它绝对帮助我更多地了解选择标签。
请查看URL这将有助于提升您的内容质量

标签： css pseudo-element blockquote

【解决方案1】：

一种选择是使用 ::before 和 ::after 伪元素。

.quote::before,
.quote::after {
  content: "\0022";
  font-size: 2em;
  font-weight: bold;
  color: green;
  vertical-align: -.3em;
}

&lt;p class="quote"&gt;This is a great quote&lt;/p&gt;

【讨论】：

感谢haltersweb。这个答案也有帮助。

【解决方案2】：

首字母伪类指的是首字母和它之前的标点符号。参考： https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter

我认为做你想做的最简单的方法可能是在你想要放大的标点符号周围放置一个 span 标签，并从 css 中设置样式。

或者您可以查看此解决方法：https://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/

【讨论】：

非常感谢 Rose，提供参考和示例。

【解决方案3】：

我最终将这两个答案结合起来，以便能够使用 div 标记而不需要添加 extre <p></p>，如下所示：

.pullquote-left {
  display: inline-block;
  max-width: 350px;
  float: left;
  padding: 20px;
  margin-left: 15px;
  border-left: #3b5998;
  border-left-width: thick;
  border-left-style: solid;
  font-style: italic;
  color: darkgray;
  font-size: 110%;
  background-color: white;
  box-shadow: 5px 5px 5px #888888;
  text-align: center;
}
.pullquote-left::before {
  font-size: 2em;
  font-weight: bold;
  content: "\201C";
}

&lt;div class="pullquote-left"&gt;This is the final result.&lt;/div&gt;

【讨论】：