.util-truncate {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
a {
text-decoration: none;
}
a:focus {
box-shadow: 0 0 0 3px blue;
text-decoration: underline;
}
a:focus-visible {
outline: 0;
}<div class="util-truncate">
<a href="#">This is a long link that will be truncated. This is a long link that will be truncated. This is a long link that will be truncated.</a>
</div>Challenge:
In an attempt to add a ring using box-shadow around the anchor element when focused, I encountered an issue where the focus style was not fully visible due to the parent's overflow hidden property. The `truncate` class being a utility class restricts me from modifying its styles. Is there a pure CSS solution to ensure the focus style displays correctly for the anchor element?
The following methods were explored to address this focus state styling challenge:
- box-shadow
- outline (with offset)
- box-shadow with z-index
- box-shadow with inset (this approach closely resembles the desired output but does not match it exactly)
- Utilizing `before/after` pseudo-selectors
Solution: