Sunnyside agency landing page

Community feedback

• 

  Cor-Ina•250

  @CorinaMurgPosted over 1 year ago

  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

  0

  ---

  

  Valeriia•200

  @Magic1vyPosted over 1 year ago

  @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!

  1