Affichage d'une citation en CSS

Ce script permet de mettre en relief une citation. Pour rendre les choses le plus simple possible à l'usage, les attributs :before et :after sont utilisés.

Le code CSS

                                            
                                                <style>
                                                    .quoted {
                                                        width: 250px;
                                                        margin: 5em;
                                                        border: 0px solid #ccc;
                                                        font-style: italic;
                                                    }
                                                    
                                                    .quoted:before {
                                                        content: open-quote;
                                                        font-size: 10em;
                                                        float: left;
                                                        position: relative;
                                                        top: -0.3em;
                                                        color: #ccc;
                                                        left: -0.1em;
                                                    }
                                                    
                                                    .quoted:after {
                                                        content: close-quote;
                                                        font-size: 10em;
                                                        float:right;
                                                        position: relative;
                                                        top: -0.25em;
                                                        right: -0.1em;
                                                        color: #ccc;
                                                    }
                                                </style>
                                            
                                        

Exemple de mise en œuvre

                                            
                                                <html>
                                                    <head>
                                                        <!--
                                                            Placer ici les définitions de style
                                                        -->
                                                    </head>
                                                    
                                                    <body>
                                                        <div class="quoted">Speech marks. Curly quotes. That annoying thing cool people do with their fingers to emphasize a buzzword, shortly before you hit them.</div>
                                                    </body>
                                                </html>