Question

我正在尝试设置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%;}

感谢。

Answer 1

一个选项是使用:: before和:: after伪元素。

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

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

Answer 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/

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: "\201C";
}

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

第一个字母的伪元素与CSS中的引号无法正常工作

3 个答案: