Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    enb
    enb is offline
    Junior Member
    Join Date
    Mar 2020
    Posts
    1
    Member #
    61465

    Question Link States and text-decoration

    So I just want my links to be without an underline at first. Then gain an underline on hover and after visiting but have a wavy underline when active. I've tested it in both Firefox and Edge, so I'm pretty sure it's not the browser. It seems to me like anything outside of choosing whether or not I want a link to have a standard underline isn't doable with the link state properties because I don't have a problem until introducing the wavy value. I've also tried dotted to the same effect. Am I right in this assumption?
    Is there another way to do this just using HTML and CSS? I haven't gotten very far in learning yet but this seems like a simple enough task.

    a:link {
    text-decoration: none;
    }

    a:visited {
    text-decoration: underline;
    }

    a:hover {
    text-decoration: underline;
    }

    a:active {
    text-decoration: wavy;
    }

  2.  

  3. #2
    Junior Member mace6466's Avatar
    Join Date
    May 2020
    Location
    San Diego, CA
    Posts
    4
    Member #
    61644
    It added curly animated swirly lines when anchor element on "active"


    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <style type="text/css" media="screen">
    *{
    box-sizing: border-box;
    }
    #main{
    width: 100%;
    text-align:center;
    padding: 3%;
    }


    a:{
    border-bottom: 1px solid #453886;
    color: #453886;
    padding-bottom: .25em;
    text-decoration: none;
    }
    a:link{
    text-decoration:none;
    }
    a:visited{
    text-decoration: underline;
    }
    a:hover{
    text-decoration:underline;

    }
    a:active{
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%23453886' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
    background-position: bottom;
    background-repeat: repeat-x;
    background-size: 20%;
    border-bottom: 0;
    padding-bottom: .3em;
    text-decoration: none;
    }
    </style>
    </head>
    <body>
    <div id="main">

    <a href="#">CLICK ME!</a>

    </div>
    </body>
    </html>

  4. #3
    Junior Member
    Join Date
    Sep 2020
    Posts
    15
    Member #
    61988
    Liked
    1 times
    text-decoration:wavy!important; should do the trick. Try now to click and hold the mouse button pressed on a link for a few seconds before letting it go. As long as element is active it should have wavy style.

    Sent from my K7 using Tapatalk


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Tags for this Thread

All times are GMT -6. The time now is 02:28 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com