20 CSS Tags & Chips Designs 17 / 20
Marquee Chip
When the chip text overflows its width, the text scrolls horizontally on hover like a stock ticker.
The code
<a href="#" class="ctc-marquee">
<span class="ctc-marquee-track">
<span>Senior Frontend Engineer @ TechCorp</span>
<span aria-hidden="true">Senior Frontend Engineer @ TechCorp</span>
</span>
</a> <a href="#" class="ctc-marquee">
<span class="ctc-marquee-track">
<span>Senior Frontend Engineer @ TechCorp</span>
<span aria-hidden="true">Senior Frontend Engineer @ TechCorp</span>
</span>
</a>.ctc-marquee {
display: inline-flex;
align-items: center;
width: 200px;
padding: 9px 14px;
background: #1f1f2e;
color: #f0eeff;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 999px;
font:
600 12px/1 system-ui,
sans-serif;
text-decoration: none;
overflow: hidden;
mask-image: linear-gradient(
90deg,
transparent 0,
#000 12px,
#000 calc(100% - 12px),
transparent 100%
);
-webkit-mask-image: linear-gradient(
90deg,
transparent 0,
#000 12px,
#000 calc(100% - 12px),
transparent 100%
);
}
.ctc-marquee-track {
display: inline-flex;
gap: 32px;
white-space: nowrap;
flex-shrink: 0;
}
.ctc-marquee:hover .ctc-marquee-track,
.ctc-marquee:focus-visible .ctc-marquee-track {
animation: ctc-marquee-roll 7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.ctc-slide:hover,
.ctc-aurora,
.ctc-status-dot::after,
.ctc-marquee:hover .ctc-marquee-track,
.ctc-marquee:focus-visible .ctc-marquee-track,
.ctc-life-chip[data-state="adding"],
.ctc-life-chip[data-state="adding"] .ctc-life-icon {
animation: none !important;
}
.ctc-life-chip[data-state="adding"] {
transform: none;
opacity: 1;
}
}
@keyframes ctc-marquee-roll { to { transform: translateX(calc(-50% - 16px)); } }
.ctc-marquee {
display: inline-flex;
align-items: center;
width: 200px;
padding: 9px 14px;
background: #1f1f2e;
color: #f0eeff;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 999px;
font:
600 12px/1 system-ui,
sans-serif;
text-decoration: none;
overflow: hidden;
mask-image: linear-gradient(
90deg,
transparent 0,
#000 12px,
#000 calc(100% - 12px),
transparent 100%
);
-webkit-mask-image: linear-gradient(
90deg,
transparent 0,
#000 12px,
#000 calc(100% - 12px),
transparent 100%
);
}
.ctc-marquee-track {
display: inline-flex;
gap: 32px;
white-space: nowrap;
flex-shrink: 0;
}
.ctc-marquee:hover .ctc-marquee-track,
.ctc-marquee:focus-visible .ctc-marquee-track {
animation: ctc-marquee-roll 7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.ctc-slide:hover,
.ctc-aurora,
.ctc-status-dot::after,
.ctc-marquee:hover .ctc-marquee-track,
.ctc-marquee:focus-visible .ctc-marquee-track,
.ctc-life-chip[data-state="adding"],
.ctc-life-chip[data-state="adding"] .ctc-life-icon {
animation: none !important;
}
.ctc-life-chip[data-state="adding"] {
transform: none;
opacity: 1;
}
}
@keyframes ctc-marquee-roll { to { transform: translateX(calc(-50% - 16px)); } }