Css on Jake Worth

Filled Emoji With CSS

Fri, 08 May 2026 09:52:29 -0400

Today I learned how to fill in an emoji with CSS. Here’s an example:

.filledEmoji {
 color: transparent;
 text-shadow: '0 0 0 #86efac';
}

Apply a Conditional Border Without Moving Element

Fri, 24 Mar 2023 09:11:39 -0400

When you allow a user’s behavior to add or remove a border from an element, that can cause the page to ‘jump around’ as the border is added or removed. A common example is a border around an element that is ‘selected’.

Fix this issue by adding a transparent border around the element and giving it color when it’s selected. No more jumps.

.element {
 border: 1px solid transparent;
}

.selectedElement {
 border-color: $selected-color;
}

Preserve Whitespace in CSS

Wed, 03 Aug 2022 10:30:10 -0400

Let’s say you have a string evaluated into a HTML template that contains newlines, like "getting\n\things\ndone" and you want those newlines to be reflected in the presentation. Like this:

getting
things
done

We can solve this with the following CSS on the string’s containing element:

white-space: pre-wrap;

With pre-wrap, “[s]equences of white space are preserved. Lines are broken at newline characters, at [breaks] and as necessary to fill line boxes.”

white-space docs

Semicolon Breaks Everything

Fri, 14 Jun 2019 11:58:15 -0400

“Select isn’t broken.” If you’re working on a CSS file, and none of your changes are being applied, check for typos, crashed servers, misplaced files, etc. Once you’ve ruled out simple mistakes, you might have a syntax error like this:

.klass {
 opacity: 0.5;
};

The trailing semicolon is incorrect, and none of the CSS below it can be understood by the browser.

Change this to:

.klass {
 opacity: 0.5;
}

There may be some environments where a broken CSS file fails loudly; Code Sandbox or Codepens are not among them. If you’re changing CSS and nothing is happening, start looking for syntax errors.