Estilo Blockquote simple y agradable - Trucos CSS

Anonim

La cita en bloque se muestra en navegadores que cumplen con los estándares con el efecto de "comillas grandes antes", y en IE con un borde izquierdo grueso y un fondo gris claro.
A diferencia de otras técnicas de citas en bloque, este estilo no requiere un elemento anidado a nivel de bloque (como p). Como tal, convierte un párrafo en un elemento de estilo en línea para evitar que el contenido caiga debajo de la cita.

blockquote ( background: #f9f9f9; border-left: 10px solid #ccc; margin: 1.5em 10px; padding: 0.5em 10px; quotes: "\201C""\201D""\2018""\2019"; ) blockquote:before ( color: #ccc; content: open-quote; font-size: 4em; line-height: 0.1em; margin-right: 0.25em; vertical-align: -0.4em; ) blockquote p ( display: inline; )

Ejemplo

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.