@CorinaMurg
Posted
Hi Valeriia,
I don't know if it's possible to round the corners of the underline, but if you are willing to use the pseudo-element ::before, it will give you many styling options. This includes rounding its corners and having it overlap a little with the text, just like in the design. Here's the code I used, feel free to use it as an example. Corina
.learn-more { font-family: Fraunces; letter-spacing: 1px; font-style: normal; font-weight: 900; font-size: 0.83rem; line-height: 1.66; text-transform: uppercase; color: var(--learn-more); position: relative; margin-left: 0.6rem; width: 6.6rem; text-align: center; z-index: 1; }
.learn-more::before { cursor: pointer; content: ""; width: calc(100% + 1rem); height: 0.8rem; position: absolute; left: -0.5rem; bottom: -0.2rem; border-radius: 28px; z-index: -1; }
Marked as helpful
@Magic1vy
Posted
@Cor-Ina Thank you for your input, Corina!
I hadn't thought of using the pseudo-element ::before to style the underline, and I appreciate you sharing your example code. I will definitely consider using this technique in my projects.
Thanks again for your valuable insight!
