How to Outline Layout Elements on Your Website’s Frontend

<?php

/**
 * Shows outlines for all the elements in your layout.
 * 
 * Green lines indicate :before pseudo-elements 
 * Red outlines indicate :after pseudo-elements
 * Set a condition to run only on frontend, If using in conjunction with the other snippet version for oxygen builder, 
 * you can set another condition for this one: url doesn't contain "ct_builder=true&ct_inner=true". 
 * This way this snippet handle's frontend and the Oxygen Builder version does the magic inside the builder. 
 * Turn off the snippet for either one when needed.
 * 
 */
 
add_action('wp_head', function(){
   
   $css = <<<EOD
   <style type="text/css">
       body * { 
        outline-style: dashed;
        /* Default outline - Few options to try out */
        /* Dark: RGBA(0,0,0,0.40) */
        /* Yellow: RGBA(255,250,0,0.80) */
        /* Blue: RGBA(0,135,255,0.50) */
        outline-color: RGBA(0,135,255,0.50);
        outline-width: 1px;
        /* The offset values prevent the outlines from overlapping with eachother. Set to 0px for maximum accuracy */
        outline-offset: 0px;
    
        }
    
        body *::before {
            outline-style: dashed;
            /* Default green for :before RGBA(0,255,178,0.40) */
            outline-color: RGBA(0,255,178,0.40);
            outline-width: 2px;
            /* The offset values prevent the outlines from overlapping with eachother. Set to 0px for maximum accuracy */
            outline-offset: 2px;
            
        }
        
        body *::after {
            outline-style: dashed;
            /* Default red for :after RGBA(255,0,0,0.50) */
            outline-color: RGBA(255,0,0,0.40);
            outline-width: 2px;    
            /* The offset values prevent the outlines from overlapping with eachother. Set to 0px for maximum accuracy */
            outline-offset: 4px;
        
        }
        
        #wpadminbar *::before, #wpadminbar *, #wpadminbar *::after {
            outline-style: none !important;
        }
    </style>
EOD;

echo $css;
});