3

CSSのみを使用して引用符を追加しようとしています。これは機能しますが、その中のコンテンツに関して引用符を下げたいと思います。現在の外観は次のとおりです。

高い引用符のスクリーングラブ

HTML：

<p id="quote">This is a quotation.</p>

CSS：

#quote {
}

#quote:before {
    content: "\201C";
    font-family: Garamond, Palatino, Roman, "Times New Roman", serif;
    font-size: 36pt;
}

#quote:after {
    content: "\201D";
    font-family: Garamond, Palatino, Roman, "Times New Roman", serif;
    font-size: 36pt;
}

そして、JSフィドル。

に上余白を追加しようとしました#quote:beforeが#quote:after、これは引用符の間のテキストにも当てはまるようです（特に上余白をゼロまたは負に追加した場合でも）。また、さまざまな要素をインラインブロックにパディングして作成してみました。

CSSを使用して引用符だけを下に移動する方法はありますか？HTML構造を変更したり、画像を追加したりすることは避けたいと思います。これは可能であるはずだと思います。

4

2 に答える 2

1

追加してみてください：

position: relative;
top: 19px;

と。#quote:before_#quote:after

また、両方の引用符にいくつかのパディングを追加しました...

JSFiddle： http: //jsfiddle.net/leniel/GAaBT/

于 2013-01-19T22:45:48.277 に答える
0

その理由は、テキストではなく引用符にfont-sizeプロパティを適用したためです。そのため、引用符が大きくなりました。これを試して。

#quote {
    font-size:36px;
}

#quote:before {
    content: "\201C";
}

#quote:after {
    content: "\201D";
}
于 2013-01-19T22:47:36.507 に答える