Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><code>:before</code> (or <code>::before</code>) is treated as the first child of the element it is being applied to, whilst <code>:after</code> (or <code>::after</code>) is treated as the last child. Therefore, <code>:after</code> would naturally cover <code>:before</code>.</p> <p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::before" rel="noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/::before</a></p> <p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::after" rel="noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/::after</a></p> <p>I imagine the best way to make sure they line up would be to use <code>position: relative;</code> on <code>label</code> and <code>position: absolute;</code> on the pseudo-elements along with the same values for <code>top</code>, <code>bottom</code> etc.</p> <p>If you wanted to make a gradient border using pseudo-elements then you could do something like this:</p> <pre><code>label { position: relative; display: inline-block; padding: 0 2px; margin: 2px; } label:before { content:""; position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background: white; } label:after { content:""; position: absolute; top: -2px; bottom: -2px; left: -2px; right: -2px; z-index: -2; background: linear-gradient(to bottom, #1e5799 13%, #efe22f 79%); } </code></pre> <p><a href="http://jsfiddle.net/QqzJg/" rel="noreferrer">http://jsfiddle.net/QqzJg/</a></p> <p>You might find this useful:</p> <p><a href="http://css-tricks.com/examples/GradientBorder/" rel="noreferrer">http://css-tricks.com/examples/GradientBorder/</a></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload