Question

您好我是CSS的新手，我在我正在建设的网站中使用引号。但是，当我可以使用CSS时，我真的不想使用图像来实现样式。我的问题是我不知道从哪里开始！ THIS IS THE IMAGE I WILL USE IF THE SAME EFFECT IS NOT POSSIBLE IN CSS有人可以告诉我如何实现这个目标

Answer 1

最简单的方法是创建一个<blockquote>元素并使用伪元素来控制引号。注意：添加了一些样式，主要是边距和填充，以覆盖浏览器样式。

body {
        font-family: sans-serif;
    }
    
    blockquote {
        color: #aaa;
        position: relative;
        display: inline-block;
        padding: 0 5px;
    }
    
    blockquote p {
        margin-bottom: 5px;
    }
    
    blockquote:before,
    blockquote:after {
        content: "“";
        font-size: 70px;
        font-family: "Georgia", Serif;
        color: #666;
        position: absolute;
        left: -30px;
        top: 5px;
    }
    
    cite {
        float: right;
        color: black;
        font-size: 12px;
        margin: 0;
        padding: 0;
    }
    
    blockquote:after {
        content: "”";
        right: -30px;
        left: auto;
    }

<blockquote><p>a man may die, nations may rise and fall, but an idea lives on</p><cite>- John F Kennedy</cite></blockquote>

@thomas提到的文章应该包含您需要的所有相关信息here

使用CSS的文本样式

1 个答案: