2

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

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

如果我这样写句子： ,( 在 the和 the"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%;}

谢谢。

4

3 回答 3

2

一个选项是使用 ::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>

于 2016-05-06T04:13:49.537 回答
1

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

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

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

于 2016-05-06T03:54:59.500 回答
0

我最终将这两个答案结合起来，以便能够使用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>

于 2016-05-06T05:15:22.017 回答