Need to make such an effect, how to be? Here is the code that I have. The first screen is how it should be, the second is what I did.

.advantages__link:hover { text-decoration: none; background-color: #9a4ba3; color: white; padding-top: 10px; padding-bottom: 10px; padding-right: 20px; border: none; transition: 0.5s; }

enter image description here enter image description here

  • Can you also add an HTM and explain what exactly the animation should be? What exactly should happen on hover? - Vadim Ovchinnikov
  • @VadimOvchinnikov here is the html element <li class = "advantages__li"> <a href = "javascript: void (0);" class = "advantages__link tablink"> Content of harmful substances </a> </ li> this triangle stroke should appear on the hover - Litash
  • Please add this to the question, and also tell me what exactly should happen on the hover? If you can edit the question so that the table of contents can understand what is at stake. "This effect", "how to do it" is unclear what is meant. - Vadim Ovchinnikov

1 answer 1

 body { background-color: #c05eca; font-family: arial; margin: 0; } div { display:inline-block; position: relative; padding: 10px 20px 10px 40px; margin: 25px 16px 0px 0px; color: white; transition: all 0.5s linear; } div:hover { background-color: #9a4ba1; } div:before { display: block; position: absolute; content: ''; left: 100%; top: 0 ; width: 0; height: 0; border-top: 19px solid transparent; border-left: 16px solid transparent; border-bottom: 19px solid transparent; transition: all 0.5s linear; } div:hover:before { border-left: 16px solid #9a4ba1; } 
 <div>Содержание вредных веществ</div>

  • Immediately I understood that something should happen on a hover, and not just output a block with a triangle. - Vadim Ovchinnikov
  • Vadim, you understood correctly) - Litash
  • Here, in essence, I did what I wanted, so I delete my answer. - Vadim Ovchinnikov
  • super, thanks a lot - Litash