Weaving a Line Through Text in CSS

This article improves and simplifies the CSS text threading demonstration of Florin Pop. The original demonstration has problems such as text duplication, line length to magic value, and dependence on JavaScript. The solution in this article avoids these problems.

HTML structure

The original demo uses Splitting.js to split the title text into span elements of a single letter. This article uses HTML preprocessor to generate HTML directly, avoiding the need for text duplication and the use of additional libraries.

<h1 aria-label="We Love to Play" role="image">
  <span class="letter">W</span>
  <span class="letter">e</span>
  <span class="letter"> </span>
  <span class="letter rev">L</span>
  <span class="letter">o</span>
  <span class="letter">v</span>
  <span class="letter">e</span>
  <span class="letter"> </span>
  <span class="letter">t</span>
  <span class="letter">o</span>
  <span class="letter"> </span>
  <span class="letter rev">P</span>
  <span class="letter">l</span>
  <span class="letter">a</span>
  <span class="letter">y</span>
</h1>

To ensure accessibility, role="image" and aria-label attributes are set throughout the element.

Basic style

Center the title using grid layout:

 body {
  display: grid;
  place-content: center;
}

You can enhance your visual effects with custom fonts and backgrounds.

Create lines with absolutely positioned ::after pseudo-element, with thickness (height) of $h :

 $h: .125em;
$r: .5*$h;

h1 {
  position: relative;

  &::after {
    position: absolute;
    top: calc(50% - #{$r});
    right: 0;
    height: $h;
    border-radius: 0 $r $r 0;
    background: criminal;
    width: calc(50vw 50%); /* Calculate line width*/
    animation: slide 2s ease-out 1s backwards; /* Add animation*/
  }
}

@keyframes slide {
  0% { transform: translateX(-100%); }
}

The line width is calculated by calc(50vw 50%) , ensuring that the line extends from the left side of the viewport to the right side of the title text.

Lines interspersed up and down

Control the display of letters above or below the line by randomly assigning .over class:

 .over {
  position: relative;
  z-index: 1;
}

Using z-index instead of translateZ has better compatibility and easier implementation.

Animation effect

The animation is implemented using @keyframes slide , and the lines slide in from the left. animation-fill-mode: backwards ensures that the line before the animation starts is in the initial position.

3D effect

To achieve the effect of lines passing through each letter, 3D transformation is required:

1. Set transform-style: preserve-3d on the title element.
2. Use the .rev class to control the rotation direction of letters about the Y-axis.
3. Set display: flex and white-space: pre to solve the problem of invalid transformation of inline element and zero space element width.
4. scalex to offset horizontal compression caused by Y-axis rotation.

 $a: 2deg;
$f: 1/cos($a);

.letter {
  white-space: pre;
  transform: rotateY($a) scaleX($f);
}

.rev {
  transform: rotateY(-$a) scaleX($f);
}

The final effect enables the lines to pass through each letter with an animation effect. It should be noted that font selection will affect the final effect.

The above is the detailed content of Weaving a Line Through Text in CSS. For more information, please follow other related articles on the PHP Chinese website!