Adaptive Skeleton Text
Skeleton text implementation using CSS pseudo-elements and Unicode ideographic spaces for responsive width adaptation.
Markup
<section>
<h1>Normal Text</h1>
<p>Sample text content to demonstrate normal paragraph styling.</p>
</section>
<section>
<h1>Single Line Skeleton Text</h1>
<p></p>
</section>
<hr>
<section>
<h1>Multi Line Skeleton Text (using <code>\A</code> in content)</h1>
<p class="multiline"></p>
</section>
Pseudo-element Content with Ideographic Spaces
Full-width Unicode characters (\3000) create adaptive skeleton text that responds to font-size changes without fixed widths.
box-decoration-break: clone ensures border-radius applies to each line fragment individually, preventing broken corners on wrapped text.
p:empty:before {
content: "\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000";
background-color: lightgray;
white-space: break-spaces;
word-break: break-all;
border-radius: 4px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
Multi-line Skeleton with Line Breaks
Line feed character (\A) in content property creates multi-line skeleton text with white-space: break-spaces for proper line breaking.
p.multiline:empty:before {
content: "\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\A\3000\3000\3000\3000\3000\3000\3000\3000\3000";
} <main>
<section>
<h1>Normal Text</h1>
<p>Sample text content to demonstrate normal paragraph styling.</p>
</section>
<section>
<h1>Single Line Skeleton Text</h1>
<p></p>
</section>
<hr>
<section>
<h1>Multi Line Skeleton Text (using <code>\A</code> in content)</h1>
<p class="multiline"></p>
</section>
</main>
<style>
main {
display: grid;
gap: 2rem;
padding: 4rem 1rem 1rem;
max-width: 600px;
margin: 0 auto;
}
h1 {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
p {
font-size: 16px;
}
p:empty:before {
content: "\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000";
background-color: lightgray;
white-space: break-spaces;
word-break: break-all;
border-radius: 4px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
p.multiline:empty:before {
content: "\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\3000\A\3000\3000\3000\3000\3000\3000\3000\3000\3000";
}
</style>
<script type="module">
import {Pane} from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/tweakpane.min.js';
const elms = document.querySelectorAll('p');
const root = document.querySelector("main");
const pane = new Pane({
container: root,
title: 'Controls'
});
pane.addBinding({'font-size': 16}, "font-size", {min: 10, max: 30})
.on("change", (e) => {
elms.forEach(elm => {
elm.style.fontSize = e.value + 'px';
})
});
pane.addBinding({'line-height': 1.5}, "line-height", {min: 1, max: 3})
.on("change", (e) => {
elms.forEach(elm => {
elm.style.lineHeight = e.value;
})
});
</script>