块引用与css的开头和结尾的大引号符号

Question

我正在尝试创建以下效果：

我可以将第一个包含内容和符号＆＃39; \ 201C＆＃39; ，但第二个＆＃39; \ 201D＆＃39; < / strong>总是在最后一行和之前的行之间创建一个大空间。 图像中的字体是helvetica，这就是为什么它与jsfiddle示例略有不同：

http://jsfiddle.net/ynbsy9Lg/

我的HTML是：

<div id="aaa-BoxBioBlogger" class="boxBioBlogger">
   <div class="theQuoteBioBlogger">
        <blockquote class="quoteBioBlogger">
            This is a testing message to show the functionality
        </blockquote>
        <span class="fromquoteBioBlogger">- The Guy -</span>
    </div>
</div>

我的css，没有任何引用的尝试是：

#aaa-BoxBioBlogger{
    width: 325px;
    height: 282px;
    background-image: url('http://i.imgur.com/mFYYD8J.jpg');
    background-size: cover;
}

.theQuoteBioBlogger {
    position: relative;
    top: 43%;
    transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
    color: #fff;
    text-align: center;
}

.fromquoteBioBlogger {
    text-transform: uppercase;
}
.quoteBioBlogger {
    width: 76%;
    line-height: 1.3em;
    margin: 20px auto;
    font-size: 1em;
}

感谢您的帮助

Answer 1

您必须先添加引号，然后使用line-height稍微将它们向下移动：

＆＃13;

＆＃13;

blockquote {
border:none;
font-family:  Georgia, "Times New Roman", Times, serif;
margin-bottom:30px;
quotes: "\201C""\201D""\2018""\2019";
}

blockquote {
    font-size:21px;
}

blockquote:before { 
    content: open-quote;
    font-weight: bold;
    font-size:25px;
    line-height: 110%;
    color:#FFFFFF;
} 
blockquote:after { 
    content: close-quote;
    font-weight: bold;
    font-size:25px;
    line-height: 110%;
    color:#FFFFFF;
  
}

#aaa-BoxBioBlogger{
    width: 325px;
    height: 282px;
    background-image: url('http://i.imgur.com/mFYYD8J.jpg');
    background-size: cover;
}

.theQuoteBioBlogger {
    position: relative;
    top: 43%;
    transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
    color: #fff;
    text-align: center;
}

.fromquoteBioBlogger {
    text-transform: uppercase;
}
.quoteBioBlogger {
    width: 76%;
    line-height: 1.3em;
    margin: 20px auto;
    font-size: 1em;
}

＆＃13;

<div id="aaa-BoxBioBlogger" class="boxBioBlogger">
   <div class="theQuoteBioBlogger">
        <blockquote class="quoteBioBlogger">
            This is a testing message to show the functionality
        </blockquote>
        <span class="fromquoteBioBlogger">- The Guy -</span>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;