zoukankan      html  css  js  c++  java
  • [CSS3] Target HTML Elements not Explicitly set in the DOM with CSS Pseudo Elements (Blockquotes)

    Pseudo elements allow us to target elements that are not explicitly set in the DOM. Using ::before ::after we can actually create and manipulate elements in the DOM that do not impact the content. While ::first-letter ::first-line ::selection ::placeholder allow us to target elements that do not have a specific DOM element.

     About 'blockquote':
    blockquote {
      quotes: "“" "”" "‘" "’";
    }
    
    blockquote::before {
      content: open-quote;
    }
    blockquote::after {
      content: close-quote;
    }

    About ::first-line, ::first-letter:

    p::first-line {
      color: green;
    }
    
    p::first-letter {
      font-size: 2em;
      float: left;
      line-height: 1.7em;
      padding: 0 .3em;
      font-weight: bold;
    }
    <div style="350px; margin: 0 auto; padding-top: 80px; padding-bottom: 80px;"> 
        
        <div class="testimonial-quote ">
            <div class="quote-container">
                <blockquote>
                    <p>Overall, fantastic! I'd recommend them to anyone looking for a creative, thoughtful, and professional team. Overall, fantastic! I'd recommend them to anyone looking for a creative, thoughtful, and professional team. Overall, fantastic! I'd recommend them to anyone looking for a creative, thoughtful, and professional team. Overall, fantastic! </p>
                </blockquote>  
                <cite><span>Kristi Bruno</span></cite>
            </div>
        </div>   
    
    </div>
    
    
    
    .testimonial-quote {
        font-size: 14px;
    }
    
    .testimonial-quote blockquote {
        /* Negate theme styles */
        border: 0;
        margin: 0;
        padding: 0;
    
        background: none;
        color: gray;
        font-family: Georgia, serif;
        font-size: 1.25em;
        font-style: italic;
        line-height: 1.4 !important;
        margin: 0;
        position: relative;
        text-shadow: 0 1px white;
        z-index: 600;
    }
    
    .testimonial-quote blockquote * {
        box-sizing: border-box; 
    }
    
    .testimonial-quote blockquote p {
        color: #75808a; 
        line-height: 1.2 !important;
    }
    
    .testimonial-quote blockquote p:first-child:before {
        content: '201C';
        color: #81bedb;
        font-size: 6em;
        font-weight: 700;
        opacity: .3;
        position: absolute;
        top: -.4em;
        left: -.2em;    
        text-shadow: none;
        z-index: -300;
    }
    
    .testimonial-quote cite {
        color: gray;
        display: block;
        font-size: .8em; 
    }
      
    .testimonial-quote cite span {
        color: #5e5e5e;
        font-size: 1em;
        font-style: normal;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        text-shadow: 0 1px white; 
    }
    
    .testimonial-quote {
        position: relative; 
    }
    
    .testimonial-quote cite {
        text-align: right; 
    }
    img {
      background-color: red;
    }

  • 相关阅读:
    黄聪:Jquerry如何深拷贝对象
    黄聪:IIS7下wordpress上传大文件(30M以上)提示404页面失败的解决方法
    黄聪:Vue的list根据index序号删除元素
    php防止视频资源被下载
    前端Jquery-Ajax跨域请求,并携带cookie
    完美验证码识别系统,验证码插件使用帮助文档
    C#截图操作(几种截图方法)
    最全各种系统版本的XPosed框架资料下载整理
    wp.editor.initialize 配置案例
    黄聪:wordpress登录后台后load-scripts.php载入缓慢
  • 原文地址:https://www.cnblogs.com/Answer1215/p/10068269.html
Copyright © 2011-2022 走看看