How do I style a span to look like a link without using javascript?

Question

For my website I will need to use instead of , because I am using mostly ajax and thus instead of links I have onclick ajax event

Answer 1

You could use a button instead of span and use bootstrap css classes to style it like a link:

<button class="btn btn-link">Link</button>

It will react on mouseOver as normal links do. Run the code snippet to preview the result:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<button class="btn btn-link">this is my link styled with bootstrap</button>

Answer 2

Option1

Just use an anchor link as follows:

<a href="#" onclick="someFunction();"> Link </a>

Option2

I don't know why you would wanna use span , but if you do you can do the following styles to make it look similar to an anchor link.

span {
    color: #000000; /* Change this with links color*/
    cursor: pointer;
    text-decoration: underline;
}

span:hover {
    color: #444444; /* Change the value to with anchors hover color*/
}

Answer 3

span {
     cursor:pointer;
     color:blue;
     text-decoration:underline;
}

Additionally you can use :hover pseudo-class to style the element when hovered(you can use any styles not just the ones originally used). Ex.

span:hover {
     text-decoration:none;
     text-shadow: 1px 1px 1px #555;
}

Example