Question

我有一个code block由Jekyll（Markdown）生成，PRISM语法突出显示，并希望添加一个右下角斜角。我添加了一个伪后元素来创建斜角，但是当代码块滚动时，斜角会滚动它。是否可以将斜角固定在右下方而无需添加新元素？

<pre class=" language-bash">
  <code class=" language-bash">$ This is a code block with it's overflow set to auto.
  I'd like to have a bottom right bevel. Unfortunately when it scrolls, the "pseudo bevel" scrolls with the content.
  I'm using Jekyll (Markdown) for the HTML and modifying the CSS from PRISM.
  Is it possible to make the pseudo bevel stay fixed in the bottom right corner?</code>
</pre>

<style type="text/css">
pre[class*="language-"],
:not(pre) > code[class*="language-"] {
    background: #ccc;
}

/* Code blocks */
pre[class*="language-"] {
    position: relative;
    padding: 1em;
    margin: .5em 0;
    overflow: auto;
    box-shadow: 0 .5em .5em -.5em  black inset;
}

pre[class*="language-"]:after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    border-width: 16px 22px 0  0;
    border-style: solid;
    border-color: #ccc rgba(243, 245, 246, 1);
    display: block; width: 0;
}
</style>

使用溢出自动

0 个答案: