Как разорвать границу вокруг текста в css?

Я создаю BLOCKQUOTE для моего сайта, в настоящее время он выглядит следующим образом: blockquote Как разорвать границу вокруг текста в css?

Я хотел бы, чтобы сломать границу вокруг открытия цитаты, так это выглядит следующим образом:

preferred style

ли Кто-нибудь знает, как это сделать? Вот CSS, который у меня есть, если это помогает.

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

источник

2016-07-26 LouiseW

Пожалуйста, дайте нам свой HTML, а также CSS .. – ristapk

почему использовать ': before' в одном месте и' :: before' в другом –

я предполагаю, из вашего CSS, ваш HTML должен быть такой:

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

Я сделал JSFiddle, чтобы сделать вашу цитату. Я также изменил способ использования размера, потому что было невозможно добавить более или менее текст. Кстати, я предполагаю, что вы используете белый фон, как в вашем примере.

источник

2016-07-26 11:23:53 Ersian

Если BLOCKQUOTE будет использоваться только на белом фоне, простое решение было бы дать blockquote::before белый цвет фона.

Редактировать

Мне нравится @ идея MarkPerera ненаследуемого цвета фона вместо белого, хотя я не уверен, если это будет работать правильно.

источник

2016-07-26 11:09:58 kalsowerus

Большое спасибо за помощь, к сожалению, добавление белого фона вызывает большой блок пробел, чтобы появиться над и ниже цитаты, которая пробегала окружающий текст. Я попытался добавить отрицательные границы/отступы/маржа, но это не имело значения. Спасибо, в любом случае! – LouiseW

Заменить blockquote:before, blockquote:after { ... } с этим

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. Я использовал двойное двоеточие здесь также согласованность

источник

2016-07-26 11:16:56

Как разорвать границу вокруг текста в css?

ответ

Смежные вопросы