- class="friendlyLink">
- <div v-for="(value, key) in friendlyLinkObj" :key="key">
- <div>{{key}}:
- <a class="friendlyLink-a" :href="value" target="_blank"> {{ value }} a>div>
- div>
-
-
- friendlyLinkObj: {
- csdn: "link...",
- github: "link..."
- }
-
-
-
- /* 基础样式 */
- a {
- position: relative;
- color: #333;
- text-decoration: none;
- }
-
- /* 伪类样式 */
- a::before {
- content: "";
- position: absolute;
- bottom: -2px;
- left: 0;
- width: 0;
- height: 2px;
- background-color: #333;
- opacity: 0;
- transition: all 0.5s ease-in-out;
- }
-
- /* 悬停样式 */
- a:hover::before {
- width: 100%;
- opacity: 1;
- }