首字母伪元素在引号 CSS 中无法正常工作

Question

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

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

如果我这样写句子："This is a test,("和T之间没有spaced，那么"T显得很大

如果我在它们之间写一个 space，它们中的 none 会变大。

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

这是我使用的 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%;}

谢谢。

Answer 1

首字母伪class指的是第一个字母及其前面的标点符号。参考： https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter

我认为做你想做的事情的最简单方法可能是在你想放大的标点符号周围放置一个 span 标签，并根据 css.

设置样式

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

Answer 2

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

.quote::before,
.quote::after {
  content: "[=10=]22";
  font-size: 2em;
  font-weight: bold;
  color: green;
  vertical-align: -.3em;
}

<p class="quote">This is a great quote</p>

Answer 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: "1C";
}

<div class="pullquote-left">This is the final result.</div>

首字母伪元素在引号 CSS 中无法正常工作

First-letter pseudo-element not working properly with quote sign in CSS

css

pseudo-element

blockquote