Bottom white line on inside

Question

I am cloning Quizlet.com. Stuck on the home screen style. Hovering over a card adds an underline to indicate that the card is selected.

When not hovering: quizlet:

my site:

When hovering over a quizlet:

When hovering over my site:

I added border-bottom to the css and it was added outside the area, not inside the area of the div tag.

edit: The phenomenon of cards being pushed out has been resolved. But I don't like the shadows going under the cards. I'll attach a photo.

Answer 1

You can try two options:

• box-shadow

• ::after pseudo element

box-shadow:

Probably the shortest solution - creating a box-shadow that is only visible on the bottom, achieved by specifying the same blur and spread (3rd and 4th parameters respectively).

div {
  width: 100px;
  height: 50px;
  background-color: #1E2230;
  border-radius: 5px;
  transition: 0.2s;
}

div:hover {
  box-shadow: 0 14px 2px 2px white;
}

body {
  background-color: #ededed;
}

<div></div>

^{Notice: Non-compliant with the OP's requirements - the outline is on the outside, not inside}

::after pseudo element

Absolutely position an element with a height of 0px and a width of 100% with a border of 10px on the bottom of the div whose position must be relative.

I would recommend this solution seeing how it's easily customizable and understandable.

div {
  width: 100px;
  height: 50px;
  background-color: #1E2230;
  border-radius: 5px;
  transition: 0.2s;
  position: relative;
}

div:hover:after {
  content: '';
  border-bottom: 10px solid white;
  position: absolute;
  height: 0px;
  bottom: 0;
  width: 100%;
  left: 0;
}

body {
  background-color: #ededed;
}

<div></div>d

Answer 2

I think you will know what's done in that div in Quizlet if you use devtool and target that specific div.