2

In some of the web developer debug tools when you hover over an element the margin or padding is shown with a yellow color so you can see it easily.

enter image description here

How are they doing this? Is it possible to do the same thing with CSS?

Update:
It looks like they are adding layers over the top of the original element (see image - the A is not completely highlighted meaning it's not a background color).

1.21 gigawatts
  • 16,517
  • 32
  • 123
  • 231
  • No, this is not possible with CSS. – Scott Marcus Nov 30 '19 at 17:24
  • CSS can only select whole elements not parts, so no. – Paulie_D Nov 30 '19 at 17:25
  • There's no magic property that will let those layers show up, but it surely can be done in some hacky way, the question is How and when you want this to happen ? and if you don't mind why ? – Rainbow Nov 30 '19 at 18:05
  • 2
    @ZohirSalak why does it have to be 'hacky'? Or you mean to do it with CSS? Gigawatts, every browser handles it differently, naturally. You can review how chromium handles it [here](https://github.com/chromium/chromium/tree/master/chrome/browser/devtools), they are just doing it at the application level. Can you do this with CSS, no. JavaScript, ofc. Lots of js repos on github and other answers on SO https://stackoverflow.com/questions/2399797/javascript-let-user-select-an-html-element-like-firebug – soulshined Nov 30 '19 at 18:24
  • @ZohirSalak It's so you can easily see the padding and margins if you wanted for learning and debugging reasons but for cases where you might not have a web developer tools installed. – 1.21 gigawatts Nov 30 '19 at 21:11

0 Answers0