finxol.io
1<template>
2 <NuxtLink
3 :href="props.href"
4 :target="props.href.at(0) === '#' ? '' : props.target"
5 >
6 <slot />
7 </NuxtLink>
8</template>
9
10<script setup lang="ts">
11import type { PropType } from "vue";
12
13const props = defineProps({
14 href: {
15 type: String,
16 default: ""
17 },
18 target: {
19 type: String as PropType<
20 | "_blank"
21 | "_parent"
22 | "_self"
23 | "_top"
24 | (string & object)
25 | null
26 | undefined
27 >,
28 default: "_blank",
29 required: false
30 }
31});
32</script>
33
34<style scoped>
35a {
36 font-weight: inherit;
37 transition: background-size .3s ease;
38 text-decoration: none;
39 background-image: linear-gradient(to right, #000, #000);
40 background-repeat: no-repeat;
41 background-size: 100% 1px;
42 background-position: bottom .2ch left;
43
44 .dark & {
45 background-image: linear-gradient(to right, #fff, #fff);
46 }
47}
48
49a:hover {
50 background-size: 0% .5px;
51 background-position: bottom .2ch right;
52}
53
54</style>