Restricting a (pseudo) element to its parent's border-box

This tutorial demonstrates a clean method to confine a pseudo-element's display within its parent's border-box, avoiding complex workarounds. The goal is a visually appealing result using minimal markup and efficient CSS. We'll achieve this without adding extra elements, using multiple shapes, or extensive lists in our CSS.

The challenge lies in ensuring the pseudo-element's styling, particularly gradients and rounded corners, remains strictly within the parent's boundaries. Let's explore the solution.

Markup

Our base markup uses paragraph (<p></p>) elements generated from a data array (using Pug for brevity):

<p style="--slist: #ebac79, #d65b56">Pancake muffin chocolate syrup brownie.</p>
<p style="--slist: #90cbb7, #2fb1a9">Cake lemon berry muffin plum macaron.</p>
<p style="--slist: #8a7876, #32201c">Wafer apple tart pie muffin gingerbread.</p>
<p style="--slist: #a6c869, #37a65a">Liquorice plum topping chocolate lemon.</p>

Each paragraph's style attribute contains a CSS variable (--slist) holding its gradient color stops.

Basic Styling

Initial paragraph styles set dimensions, font, and border-radius:

$w: 26em;
$h: 5em;

p {
  width: $w; height: $h;
  border-radius: .5*$h;
  background: silver;
  font: 1.5em/ 1.375 trebuchet ms, verdana, sans-serif;
}

This provides a visual base for our further styling.

Layered Backgrounds

We create a layered background using background-clip to control gradient application to content-box, padding-box, and border-box:

p {
  /* ...previous styles... */
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  border: solid $b transparent;
  padding: $p;
  background: 
    linear-gradient(#dbdbdb, #fff) content-box, 
    linear-gradient(var(--slist)) padding-box, 
    linear-gradient(#fff, #dcdcdc) border-box;
  text-indent: 1em;
}

This technique ensures gradients respect the rounded corners defined by border-radius.

Numbering

Paragraph numbering is added using the :after pseudo-element:

$d: $h - 2*$b;

p {
  /* ...previous styles... */
  counter-increment: c;

  &:after {
    box-sizing: inherit;
    border: inherit;
    width: $d; height: $d;
    border-radius: 50%;
    box-shadow: 
      inset 0 0 1px 1px #efefef, 
      inset 0 #{-$b} rgba(#000, .1);
    background: 
      linear-gradient(var(--slist)) padding-box, 
      linear-gradient(#d0d0d0, #e7e7e7) border-box;
    color: #fff;
    content: counter(c, decimal-leading-zero);
    display: grid;
    place-content: center;
    margin-right: -$p;
    text-indent: 0;
  }
}

This creates circular numbered markers.

The Arrow Pseudo-element

The angled arrow is created using the :before pseudo-element:

p {
  /* ...previous styles... */
  position: relative;

  &:before {
    position: absolute;
    right: -$b;
    width: $h;
    height: $h;
    border-radius: $b;
    transform: rotate(45deg);
    box-shadow: 0 0 7px rgba(#000, .2);
    background: linear-gradient(-45deg, transparent calc(50% - #{.5*$h}), orange 0, purple calc(50%   #{.5*$h}), transparent 0);
    content: '';
    clip-path: inset(0 round $r);
  }
}

Crucially, clip-path: inset(0 round $r) ensures the arrow stays within the parent's border-box, respecting its border-radius. The gradient's stop positions are carefully calculated to align with the parent's top and bottom edges.

This approach delivers a visually appealing and efficiently coded solution to the problem of restricting a pseudo-element to its parent's border-box. The use of clip-path: inset() provides a concise and effective method for achieving this.

The above is the detailed content of Restricting a (pseudo) element to its parent's border-box. For more information, please follow other related articles on the PHP Chinese website!