I am doing a mentor frontend challenge and I see that in the design I have to make this underline in a button:
My first thought was that it was a border-bottom with border-radius, but it clearly didn't work.
I'm about to use a div and make a line and do that effect, it would be the easiest but I don't think it's the right way to do it, does anyone have any ideas?
This is my button:
button{
color: black;
font-family: 'Fraunces', serif;
background:none;
outline: none;
border: none;
font-size: 19px;
font-weight: 800;
border-bottom: rgba(255, 238, 0, 0.829) 5px solid;
border-end-end-radius: 7px
}
<button>Learn more</button>
Thank you very much.
You could do it with the CSS
content
property and the pseudo element::after
With
::after
we can insert a pseudo-element at the end of an element and this is capable of being modified with CSS . Throughcontent
we insert an empty content (in effect it would be like inserting an<div>
empty) and we give it the appearance we want.If you look closely, it's the idea you discarded of doing it with a
<div>
(which I don't see as a bad solution either) but made up a bit.References: :after