How do I break the border around text in css?

Question

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:

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;
}

Please give us your HTML as well as CSS.. – ristapk Jul 26 '16 at 11:08 — ristapk, Jul 26 '16 at 11:08
why use `:before` in one place and `::before` in another – Mark Perera Jul 26 '16 at 11:14 — Mark Perera, Jul 26 '16 at 11:14

score 3 · Answer 1 · edited Jun 20 '20 at 09:12

3

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.

edited Jun 20 '20 at 09:12

Community

1
1

answered Jul 26 '16 at 11:09

kalsowerus

998
8
23

Thanks very much for you help, unfortunately adding the white background cause a large block of white space to appear above and below the quote that ran over the surrounding text. I tried adding negative borders/ padding/ margin but it made no difference. Thanks anyway! – LouiseW Jul 27 '16 at 11:30

score 1 · Accepted Answer · answered Jul 26 '16 at 11:23

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.

score 0 · Answer 3 · answered Jul 26 '16 at 11:16

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

How do I break the border around text in css?

3 Answers3