JSFiddle - React, Tailwind, and code Playground

by stevelove

HTML

<div class="relative-with-content">relative with content</div>
<div class="absolute-with-content">absolute with content</div>
<div class="relative-no-content">relative no content</div>
<div class="absolute-no-content">absolute no content</div>

CSS

.relative-with-content:first-letter,
.absolute-with-content:first-letter {
    color:#f60;
    font-size:60px;
    line-height:2;
}

.relative-with-content:before {
    content:"R";
    position:relative;
}

.absolute-with-content:before {
    content:"A";
    position:absolute;
}

.relative-no-content:first-letter,
.absolute-no-content:first-letter {
    color:#00f;
    font-size:60px;
    line-height:2;
}

.relative-no-content:before {
    content:"";
    position:relative;
}

.absolute-no-content:before {
    content:"";
    position:absolute;
}