Background color on div gets cut off on horizontal scroll ?

[iizag]

I am styling a new syntax plugin I just installed on WordPress, but I can’t figure out how to fix one minor CSS issue.

This is an example page: http://izaguir.re/example-test/

Inside the code block, when you scroll to the right you will notice the JavaScript “header bar” stays static instead of moving with the scroll.

I can’t figure out what to change in this plugins CSS to make the header bars background color and name follow the user, as the user scrolls to the right inside the code block, instead of staying static.

When I inspect this element header bar I get this:

pre[class*='language-'][data-language]::before {
    content: attr(data-language);
    color: white;
    background-color: #1f4662;
    display: inline-block;
    position: absolute;
    top: 0;
    text-align: right;
    width: 100%;
    right: 0;
    letter-spacing: 1px;
    font-size: 12px;
    border-top: 2px solid #ffc600;
    padding: 5px 18px 5px 5px;
    text-shadow: none;
}

[yoyo]

Header you mentioned is a pseudo element. It will not scroll with the Code block. Since the code block is inside
a

<pre></pre>

Any HTML inside the above tag will be displayed as a code. Thats why they have use pseudo element to create header.

[Author]

Posts