
- <h3 class="hover one">Hover Me</h3>
- <h3 class="hover two">Hover Me</h3>
- <h3 class="hover three">Hover Me</h3>
- <h3 class="hover four">Hover Me</h3>
- <h3 class="hover five">Hover Me</h3>
- <style>
- .hover {
- --c: #1095c1; /* the color */
- --s: .15em;
-
- line-height:1.1em;
- padding-bottom: calc(2.1*var(--s));
- background:
- conic-gradient(from 135deg at top,var(--c) 90deg,#0000 0)
- left 0 bottom var(--s)/calc(2*var(--s)) var(--s) repeat-x,
- conic-gradient(from -45deg at bottom,var(--c) 90deg,#0000 0)
- left var(--s) bottom 0/calc(2*var(--s)) var(--s) repeat-x;
- }
- .hover:hover {
- color: var(--c);
- }
-
- .one {
- -webkit-mask:
- linear-gradient(#000 0 0) content-box,
- linear-gr