CODEWITHSUNDEEP
htmlcss
user1411837
user1411837

Reputation: 1564

Wrap double-quote images around text

I am adding text in a paragraph. I want to wrap quotes around the text (as images).

<p class="aboutus" style="font-style: impact;font-size: medium">
test test test test test test test test test test test test test test test test .
</p>

If I want to add double-quotes around the text, this works fine.

p.aboutus:before {
    content: '"';
}

p.aboutus:after {
    content: '"';
}

But now if I have the double-quotes in images (quote1.jpeg and quote2.jpeg), and if I add the <img src> in the pseudo selectors, it doesn’t work. Why not?

Upvotes: 3

Views: 3110

Answers (2)

Matt Coughlin
Matt Coughlin

Reputation: 18906

Unless you require some very special styling, it may be adequate to use plain text for the quotes, rather than images.

Here's a JSFiddle demo with an example of each.

The first one uses plain-text, and the second one uses images. They're virtually identical in appearance (tested in: IE8/9/10, FF, Safari, Chrome, Opera). Both allow quotes of any size to be displayed, without affecting the line-height of the first and last line of text (which occurs when a large image is added inline).

Below is a simplified version of the code (see the demo for the full details).

Plain-text

.text-quotes blockquote {
    position: relative;
    margin: 0;
    padding: 8px 0 22px 0;
    text-indent: 36px;
}
.text-quotes blockquote:before,
.text-quotes blockquote:after {
    position: absolute;
    font-size: 60px;
}
.text-quotes blockquote:before {
    content: '\201C';   /* Left double quote */
    left: -36px;
    top: 8px;
}
.text-quotes blockquote:after {
    content: '\201D';   /* Right double quote */
    right: 0;
    bottom: -13px;
}

Images

.image-quotes blockquote {
    position: relative;
    margin: 0;
    padding: 8px 0 22px 0;
    text-indent: 36px;
}
.image-quotes blockquote:before,
.image-quotes blockquote:after {
    display: block;
    position: absolute;
    width: 27px;
    height: 21px; 
}
.image-quotes blockquote:before {
    content: url(http://www.forestpath.org/test/misc/double-quote-left.png);
    left: -35px;
    top: 0;
}
.image-quotes blockquote:after {
    content: url(http://www.forestpath.org/test/misc/double-quote-right.png);
    right: 35px;
    bottom: 0;
}

Upvotes: 1

Ry-
Ry-

Reputation: 225273

You need to specify the images with the url() syntax:

p.aboutus::before {
    content: url('../images/quote1.jpeg'); /* Or wherever it is */
}

p.aboutus::after {
    content: url('../images/quote2.jpeg');
}

Note that the URLs are relative to the location of the containing stylesheet; not your page.

Upvotes: 5

Related Questions