firefox-name
@firefox-name
Не так давно закончил курсы,поэтому еще нуб.

Как грамотно сделать кавычки в конце текста?

Привет всем!! 1)Ребята, не получается сделать нормально кавычки двойные, если в начале текстового блока еще можно сделать через картинку эту кавычку, сделать ей position: absolute и оттолкнуться от текста,то в конце такой вариант не проходит, текст меняется и картинка уходит сильно. Как кавычки сделать чтобы при добавлении, уменьшении текста кавычки всегда были на месте ?
2) При добавлении того же текста, соседняя колонка тоже увеличивается в размере, появляется отступ!! Как решать эту проблему, я не так структуру html сделал или текст нужно после 50 допустим символов отсекать ссылкой "Читать далее.." ?? span и font-size не помог, 5fa44eed1b5b6173604003.pngотступ только лишний появляется. Подскажите мне балбесу.
  • Вопрос задан
  • 97 просмотров
Решения вопроса 1
@zkrvndm
Боты, парсеры, расширения
Подход у вас в корне не верный. Используйте псевдокоасы :before и :after для добавления нужных символов до и после текста.

https://yandex.ru/search/touch/?text=css+%D0%BF%D1...
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
ib0123456789
@ib0123456789
Parse error: syntax error, unexpected ';'
https://html5book.ru/examples/styling-quotes/demo-...

html
<blockquote>
  <p><span>Success is often...</span></p>
  <footer>— <cite>Coco Chanel</cite></footer>
</blockquote>


css

blockquote {
margin: 0;
background: white;
border: 15px solid #FDE640;
border-radius: 8px;
text-align: center;
color: #58554B;
padding: 30px 50px;
font-family: 'Lato', sans-serif;
}
blockquote p {
margin-top: 0;
font-size: 22px;
line-height: 1.25;
}
blockquote span {
background: #FDE640;
box-shadow: -20px 0 #FDE640, 20px 0 #FDE640;
position: relative;
}
blockquote span:before {
content: "\201C";
font-family: serif;
position: absolute;
font-size: 60px;
left: -50px;
top: 10px;
line-height: 0;
}
blockquote span:after {
content: "\201D";
font-family: serif;
position: absolute;
font-size: 60px;
right: -50px;
bottom: -10px;
line-height: 0;
}
blockquote cite {
font-style: normal;
text-transform: uppercase;
font-size: 14px;
}



инсточник
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы