Append characters to every line in CSS for blockquotes

  • deepseaengine

    (@deepseaengine)


    12 years ago

    Hello,

    I’m trying to style my blockquotes in CSS so that each line automatically starts with some characters (similar to email replies starting with “> “). Ideally, the characters will be outside of the margins to the left of the actual text, and for the quoted text to be justified.

    I could add the “> ” characters manually, but then I wouldn’t be able to justify the text separately from the characters… if that makes sense!

    I’ve done extensive searching and CSS help sites don’t seem to have the answer, so if anyone can help I’d really appreciate it!

Viewing 2 replies - 1 through 2 (of 2 total)
  • jevets

    (@jevets)

    12 years ago

    Use CSS :after and :before. Something like: 

    blockquote:before {
  content: "> ";
}

    Plenty of resources on google, here’s one to get you going. http://coding.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/

    Another common solution is to use a background image.

    Thread Starter deepseaengine

    (@deepseaengine)

    12 years ago

    Pseudo-elements were my first thought, however they won’t work as what I’m after is to precede every single line in a <p> element as the text wraps, with a > character. Like so:

    > This is a sample text to demonstrate
    > what I’m trying to do but I can only
    > do it manually by adding new lines
    > and then the symbol. Pseudo-
    > elements would only put the >
    > character before or after the whole
    > <p> section.

    As you can see, the text has to be broken up manually and can’t be justified. Any ideas?

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Append characters to every line in CSS for blockquotes’ is closed to new replies.