B
B
Bot0102021-06-28 16:53:51
css
Bot010, 2021-06-28 16:53:51

How to make such an element on hover?

How to make it appear on hover on an element?60d9d4459ac77010001910.png

Answer the question

In order to leave comments, you need to log in

3 answer(s)
D
Dyusha Metelkin, 2021-06-28
@Bot010

A
Ankhena, 2021-06-28
@Ankhena

Since links have icons and are likely to be made with a pseudo element, I thought I'd come up with a solution with only one pseudo element . And in general, if you can use one, then why write two ..

the code

<nav>
  <ul>
    <li><a href="">link</a></li>
    <li><a href="">link</a></li>
    <li><a href="">link</a></li>
    <li><a href="">link</a></li>
    <li><a href="">link</a></li>
  </ul>
</nav>

nav {
  width: 200px;
  background: #92aef4;
}

ul {
  --color: white;
  --radius: 30px;
  --smoothing-radius: 29.4px;
  border-right: 10px solid var(--color);
  padding: 0 0 2em 1em;
  list-style-type: none;
}

a {
  position: relative;
  display: block;
  padding: 0.5em;
  border-radius: var(--radius) 0 0 var(--radius);
  text-decoration: none;
  color: #6704f2;
}

a::before {
  content: "❄ ";
  color: white;
}

a:hover::before {
  color: deeppink;
}

a:hover {
  background: var(--color);
}

a:hover::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: var(--radius);
  height: calc(100% + 2 * var(--radius));
}

li:not(:last-child):not(:first-child) a:hover::after {
  background: radial-gradient(at top left, transparent var(--smoothing-radius), var(--color) var(--radius)) no-repeat top right / var(--radius) var(--radius),
    radial-gradient(at bottom left, transparent var(--smoothing-radius), var(--color) var(--radius)) no-repeat bottom 0 right 0 / var(--radius) var(--radius);
}

li:first-child a:hover::after {
  background: radial-gradient(at bottom left, transparent var(--smoothing-radius), var(--color) var(--radius)) no-repeat bottom 0 right 0 / var(--radius) var(--radius);
}

li:last-child a:hover::after {
  background: radial-gradient(at top left, transparent var(--smoothing-radius), var(--color) var(--radius)) no-repeat top right / var(--radius) var(--radius);
}
body {
  padding: 50px;
  margin: 0;
  font-size: 20px;
  font-family: 'Neucha', cursive;
  background: #eee;
}

E
Evgeny Golubev, 2021-06-28
@bestowhope

Make such corners in svg. Otherwise, hemorrhoids

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question