Kort |
|
---|---|
#47058 Kort:div.syntaxhighlighter { position: relative; } div.syntaxhighlighter:before { color: @white; padding: 0 .5rem; background: @black; position: absolute; top: 0; left: 0; z-index: 1; } div.syntaxhighlighter.php:before { content: 'PHP'; } div.syntaxhighlighter.xml:before { content: 'XML'; } Если подумать, то правильнее было бы так: div:has(> div.syntaxhighlighter) { position: relative; } div:has(> div.syntaxhighlighter):before { position: absolute; top: 0; right: 0; z-index: 1; } div:has(> div.syntaxhighlighter.css):before { content: 'CSS/LESS'; } div:has(> div.syntaxhighlighter.php):before { content: 'PHP'; } div:has(> div.syntaxhighlighter.xml):before { content: 'XML'; } Псевдокласс :before() должен применяться для непосредственного родительского элемента .syntaxhighlighter, иначе при горизонтальной прокрутке "лэйба" будет тоже скролиться. Но в Mozilla работать не будет -- псевдокласс :has() в нем пока что не реализован. В остальных браузерах все ок. P.S. Или этот самый безымянный родительский div должен перестать быть безымянным. SED.by - создание сайтов, разработка плагинов и тем для Котонти
|
|
This post was edited by Kort (2023-09-15 06:31, 8 months ago) |