Skip to content
Submitted over 1 year ago

Age-Calculator-App

Taylor H.•280
@tahobbit11
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Age calculator app
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

I have one main questions and that is how do you make the line through the button for the design of the site. I tried doing button::before, but the line would only appear on the top. Thanks

Community feedback

  • Fatehbir Singh•360
    @fa7ehPosted over 1 year ago

    Congratulations on completing the challenge.

    Regarding your question about horizontal line,

    One method is to create horizontal line as div and give it height of 1px. Then put horizontal line and button in flex container to put them next to each other and align-items: center.

    Another method is ::before pseudo element, like you mentioned. But you can move the before element with top, left, right and bottom properties, just like you do with position absolute element. or you can try 'vertical-align: center' on ::before element.

    I hope this helps.

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord