Reputation: 4027
I'm working on a link styling issue. I found a pretty good reference, and in particular the “Read more” Link example. Here is the codepen for that example.
----HTML-----
<a href="#0" class="r-link link text-underlined">Click this link</a>
----CSS-----
.r-link{
display: var(--rLinkDisplay, inline-flex) !important;
}
.r-link[href]{
color: var(--rLinkColor) !important;
text-decoration: var(--rLinkTextDecoration, none) !important;
}
.text-underlined{
--uiTextUnderlinedLineHeight: var(--textUnderlinedLineHeight, 2px); /* 1 */
--uiTextUnderlinedLineGap: var(--textUnderlinedLineGap, .5rem);
--uiTextUnderlinedPaddingBottom: calc(var(--uiTextUnderlinedLineHeight) + var(--uiTextUnderlinedLineGap));
padding-bottom: var(--uiTextUnderlinedPaddingBottom) !important;
position: var(--textUnderlinedPosition, relative) !important;
z-index: var(--textUnderlinedZindex, 1) !important;
}
.text-underlined::after{
content: "";
width: var(--textUnderlinedLineWidht, 100%) !important;
height: var(--uiTextUnderlinedLineHeight) !important;
background-image: var(--textUnderlinedBackgroundImage, linear-gradient(to top, var(--textUnderlinedLineColor, currentColor) 30%, rgba(0, 0, 0, 0) 45%)) !important;
position: absolute;
left: var(--textUnderlinedLineLeft, 0) !important;
bottom: var(--textUnderlinedLineBottom, 0) !important;
z-index: var(--textUnderlinedLineZindex, -1) !important;
}
.link{
--textUnderlinedLineHeight: 100%;
--textUnderlinedLineGap: 0;
--textUnderlinedLineColor: #fed330;
padding-left: .75rem;
padding-right: .75rem;
}
.link::after{
will-change: width;
transition: width .1s ease-out;
transform: rotate(-2deg);
transform-origin: left bottom;
}
.link:hover{
--textUnderlinedLineWidht: 0;
}
.link:hover::after{
transition-duration: .15s;
}
.link{
font-weight: 700;
text-transform: uppercase;
}
.link:focus{
outline: 2px solid #fed330;
outline-offset: .5rem;
}
:root{
--rLinkColor: #222;
}
Here is my attempt in Chrome. Looks great.
And here is the same code in Safari. What is that odd dark colored line?
Note: the dark colored line is visible on macOS desktop Safari as well as iOS on iPhone. I see the same defect in the codepen when displayed on different browsers. Except for the color splash, my CSS is EXACTLY the same as the codepen linked above.
Two questions:
Upvotes: 1
Views: 1147
Reputation: 4027
So the comment from Kaiido gave me some great hints. It was not exactly the same root cause, but got me thinking in a different direction. I believe the root cause of my issue was an oversight in the original sample source code (plus what appears to be a miss in Chrome). Reference.
Here is the corrected code:
.text-underlined::after {
content: "";
width: var(--textUnderlinedLineWidth, 100%) !important;
height: var(--uiTextUnderlinedLineHeight) !important;
background-image: var(
--textUnderlinedBackgroundImage,
linear-gradient(
to top,
var(--textUnderlinedLineColor, currentColor) 30%,
rgba(255, 255, 255, 0) 45%
/* previous rgba(0, 0, 0, 0) 45% fail in Safari */
)
) !important;
position: absolute;
left: var(--textUnderlinedLineLeft, 0) !important;
bottom: var(--textUnderlinedLineBottom, 0) !important;
z-index: var(--textUnderlinedLineZindex, -1) !important;
}
As I see it, this was likely an issue overlooked in the original source code. Not sure why Chrome didn't catch it, but once I made the change to rgba(255, 255, 255, 0) 45%
the element looks great in both Safari and Chrome.
Upvotes: 1