Create a dotted line effect that is responsive and has a fade out on each side. This is based on the Next.js website as explained here.
.target::before, .target::after {
--color: rgba(0, 0, 0, 0.5);
--line-offset: -100px;
--line-width: 1px;
--line-gap: 5px;
--geist-background: white;
--line-fade-stop: 90%;
background: linear-gradient(to right, var(--color), var(--color) 50%, transparent 0, transparent);
background-size: var(--line-gap) var(--line-width);
content: "";
height: var(--line-width);
left: calc(var(--line-offset) / 2 * -1);
mask: linear-gradient(to left, var(--geist-background) var(--line-fade-stop), transparent),
linear-gradient(to right, var(--geist-background) var(--line-fade-stop), transparent),
linear-gradient(#000, #000);
mask-composite: destination-in;
position: absolute;
width: calc(100% + var(--line-offset));
}
Explanation: An absolute poitioned pseudo element is added. The dotted line is added with a linear-gradient background image. The gradient is half solid color and half transparent. The background image is repeated to fill the size of the element and create a dotted effect.
A mask is added which creates the fade at the start and end of the line.
Simplified with mask in one linear-gradient.
.target2::before, .target2::after {
--color: rgba(0, 0, 0, 0.5);
--line-offset: -100px;
--line-width: 1px;
--line-gap: 5px;
@apply absolute;
background: linear-gradient(to right, var(--color), var(--color) 50%, transparent 0, transparent);
background-size: var(--line-gap) var(--line-width);
content: "";
height: var(--line-width);
left: calc(var(--line-offset) / 2 * -1);
mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent 100%);
width: calc(100% + var(--line-offset));
}