::before content for li element affect dat.gui hoste in Observable Notebook Cell

Community Help
1

Apparently Observable is implementing a pseudo element of ::before for li elements; both chrome and firefox.

This is affecting dat.Gui

Attempted this technique, but it didn’t work: http://mcgivery.com/htmlelement-pseudostyle-settingmodifying-before-and-after-in-javascript/

Any ideas?

Notebook reproduction: https://observablehq.com/@mariodelgadosr/observable-and-dat-gui-issues

2

Hi Mario, could you be a little more explicit about the issues you’re having? The datgui element in your notebook seems to look and function OK for me. Sorry if I’m being dense.

3

Ah, OK. I think I understand. A little circle is appearing next to the datGui element due to one of Observable’s CSS rules. Maybe adding this CSS snippet helps?

.dg ul li:before {
  content: none;
}

You can see it in action in this fork:

I made some other tweaks to avoid selecting elements and so that re-running the cell won’t add extra copies of the datGui element to the div.

4

Thanks!..made my DataVisual Design Pattern Notebook using the dat.gui much more presentable.

1 Like