CODEWITHSUNDEEP
cssborder-layoutblockquote
LouiseW
LouiseW

Reputation: 53

How do I break the border around text in css?

I am creating a blockquote for my website, it currently looks like this: blockquote

I would like to break the border around the opening quotation so it looks like this:

preferred style

Does anyone know how to do this? Here is the CSS I currently have, if that helps.

blockquote {
        display: block;
        float: left;
        background: #ffffff;
        width: 180px;
        padding-bottom: 0px;
        font-style: italic;
        font-family: Helvetica, MetaOT-bold, sans-serif;
        font-size: 18px;
        line-height: 1.5;
        margin: 30px 25px 10px 0px;
        border: 2px solid #5fa0d8;
        border-bottom: 0;
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
        padding: 20px;
        padding-bottom: 0;
        position: relative;
        quotes:"\201C" "\201D";  /*Unicode for Quoteation marks*/
}

blockquote p {
    line-height: 1.5;
    padding-bottom: 0px;

}

blockquote:before, blockquote:after {
    color: #5fa0d8;
    font-family: Georgia, serif;
    font-style: normal;
    font-weight: bold;
    font-size: 100px;
    position: absolute;
}

blockquote::before {
    content: open-quote;
    left: 10px;
    top:-50px;
}

blockquote::after {
    content: close-quote;
    left: 160px;
    top:150px;
}

cite {
    display:block;
    background-color: #5fa0d8;
    width: 210px;
    float: left;
    color: #ffffff;
    font-size: 13px;
    font-style: normal;
    padding: 3px;
    padding-left: 10px;
    margin-left: -21px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    margin-top: 23px;
    margin-bottom: 0px;
}

Upvotes: 3

Views: 1356

Answers (3)

Ersian
Ersian

Reputation: 219

I assume from your CSS, your HTML should be like that:

<blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex cupiditate tenetur corporis officia corrupti at mollitia quam deleniti minus fuga accusantium, illo aliquid, eaque aperiam voluptatibus ad optio magni hic.</p>
    <cite>Cite box</cite>
</blockquote>

I've made a JSFiddle to render your blockquote. I have also changed the way you use the size because it was not possible to add more or less text. BTW I assume you're using a white background like in your example.

Upvotes: 1

kalsowerus
kalsowerus

Reputation: 1008

If the blockquote will only be used on white background, a simple solution would be to give the blockquote::before a white background color.

Edit

I like @MarkPerera's idea of inheriting the background color instead of using white although I am not sure if this would correctly work.

Upvotes: 3

Mark Perera
Mark Perera

Reputation: 662

Replace blockquote:before, blockquote:after { ... } with this

blockquote::before, blockquote::after {
    color: #5fa0d8;
    background-color: inherit;  //or white if it doesn't work
    font-family: Georgia, serif;
    font-style: normal;
    font-weight: bold;
    font-size: 100px;
    position: absolute;
}

P.S. I used double colons here also for consistency

Upvotes: 0

Related Questions