CSS | Kybercode

Cooper Gidge on Aug 3, 2025.

Use a zero-width, no-break space to make your external link icons wrap with the link text. Even if you use display: inline, the icon won't wrap on Safari (although it will on Chrome and other browsers, which is confusing).

<div>
    <p>Here is a paragraph with <a href="https://example.com/" class="external">a super amazing link</a>, no way!</p>
</div>

.external::after {
    /* Use this zero-width, no-break space */
    content: "\FEFF";
    /* Icon Credit: https://remixicon.com/icon/external-link-line */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgb(0,0,255)'%3E%3Cpath d='M10 6V8H5V19H16V14H18V20C18 20.5523 17.5523 21 17 21H4C3.44772 21 3 20.5523 3 20V7C3 6.44772 3.44772 6 4 6H10ZM21 3V11H19L18.9999 6.413L11.2071 14.2071L9.79289 12.7929L17.5849 5H13V3H21Z'%3E%3C/path%3E%3C/svg%3E");
    background-position: center;
    background-size: cover;
    padding-right: 18px;
    white-space: nowrap;
    display: inline;
}
div {
    border: 2px solid #FF0000;
    padding: 10px; 
    width: 300px;
    resize: both;
    overflow: auto;
}

false

Result

For full transparency, ChatGPT helped a bit when coming up with the above solution.

CSS Today I Learned Web Dev

Cooper Gidge on May 28, 2025.

So overflow-wrap: break-word and CSS Grid don't work well together. But using minmax(0, 1fr) instead of just 1fr fixes it.

This defaults the min-width of the column to 0 instead of auto. For whatever reason, min-width: auto causes problems.

<div class="grid">
    <div><p>Without <code>minmax(0, 1fr)</code></p></div>
    <div><p>This div contains a very long word: someveryveryveryveryveryverylongword</p></div>
</div>
<div class="grid grid-2">
    <div><p>With <code>minmax(0, 1fr)</code></p></div>
    <div><p>This div contains a very long word: someveryveryveryveryveryverylongword</p></div>
</div>

.grid {
    display: grid;
    /* this doesn't work... */
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    max-width: 400px;
    margin-bottom: 8px;
}
.grid div {
    /* overflow-wrap: break-word isn't working... */
    overflow-wrap: break-word;
    border: 3px dashed #FF0000;
}
.grid-2 {
    /* this DOES work... */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
}

false

Result

Browsers CSS Web Dev

Safari is a Difficult Browser to Work With

Author

Cooper Gidge

Date

Mar 31, 2025

Using margin on a CSS Grid child doesn't work well with aspect-ratio on iOS 18.3.2. My latest of many discoveries that contribute to my complicated relationship with Safari and mobile web development.

Read Article

CSS Web Dev

Cooper Gidge on Mar 22, 2025.

Links with a different color underline are cool. I couldn't tell you why I like them. I just do.

Here is how I normally style my links for projects:

<p class="style-1">
    Here is a paragraph with <a>some great hanging underlines</a>. Here is <a>another link</a> for your linking pleasure.
</p>
<p class="style-2">
    Here is yet another paragraph with <a>some great links without hanging underlines</a>. Here is <a>another link</a> for your linking pleasure.
</p>

/* The link styles */
.style-1 a {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: #FF0000;
    text-underline-position: under;
}
.style-2 a {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: #FF0000;
}
/* Extra styles for the demo */
p {
    font-family: sans-serif;
    font-size: 1.1rem;
    line-height: 1.5;
}
a {
    cursor: pointer;
}
a:hover {
    color: #FF0000;
}