How to Create Inner Text Shadow with CSS Pseudo-Elements?

Creating Inner Text Shadow with CSS

You're seeking a technique to cast a blurry, inner shadow on text within a web page. You've explored the box-shadow property but realized its limitations to inner shading. This article aims to guide you with a novel technique utilizing pseudo-elements to achieve your desired effect.

The Pseudo-Element Trick

In CSS, pseudo-elements (:before and :after) enable the creation of additional content within an element. Here's a clever application of these elements to create the inner shadow:

1. Content: Assign the title attribute on your text element with the desired inner shadow content. This content will be used by the pseudo-elements.
2. Pseudo-Elements: Add two pseudo-elements (:before and :after) to the text element. Assign the same content as the title attribute and give them a slight offset position (e.g., 1px left and 1px top) relative to the original text.
3. Color and Opacity: Adjust the color and opacity of the pseudo-elements to create a translucent blurry shadow. For instance, rgba(255, 255, 255, .1) would create a white shadow with 10% opacity.
4. Z-Index: Position the pseudo-elements behind the original text using z-index and negative values to ensure they're rendered behind the text.

Example Code

Below is an example code that demonstrates the technique:

<code class="css">.depth {
  display: block;
  padding: 50px;
  color: black;
  font: bold 7em Arial, sans-serif;
  position: relative;
}

.depth:before,
.depth:after {
  content: attr(title);
  padding: 50px;
  color: rgba(255, 255, 255, .1);
  position: absolute;
}

.depth:before {
  top: 1px;
  left: 1px
}

.depth:after {
  top: 2px;
  left: 2px
}</code>

<code class="html"><h1 class="depth" title="Lorem ipsum">Lorem ipsum</h1></code>

The above is the detailed content of How to Create Inner Text Shadow with CSS Pseudo-Elements?. For more information, please follow other related articles on the PHP Chinese website!