CSS3 Arrow Hyperlink

CSS3 arrow hyperlink

You should set the top explicitly to 0 for the :after element, and also remember to set the position:relative for the div element so that the absolute positioning works as expected:

.readmore > div::after {
...
top:0;
}

.readmore > div {
...
position:relative;
}

Fiddle

NOTE: The negative margin-top should be removed. The cause of your problem is you use negative margin-top (maybe by trial and error until it looks OK in FF), but the position also depends on the top and left. The default values of these properties are implemented differently by different browsers, the only solution to set it in order is explicitly set the top, left and remember the rule to determine the containing block for the absolute positioned element. (the nearest ancestor which has position as absolute or relative).

CSS styling. Put a arrow image before a link

The following worked for me.

<style>
#submitYourConcern
{
color: #4b92db!important;
text-align: right;
}
#submitYourConcern:before{
content: url(/_layouts/images/grey_arrow.png);
padding-right: 5px;
}
</style>

How to add arrow beside some links in CSS?

Based on the other answers you've had it looks like your question has changed considerably... but to answer it as it stands, if you just want it on SOME of the links, you could add an additional class to those links, and add your background image just to that class.

Arrow link used as page scroll down

Click button "Run code snippet" to see arrow or output.

.arrow {  border: solid black;  border-width: 0 3px 3px 0;  display: inline-block;  padding: 3px;  transform: rotate(45deg);  -webkit-transform: rotate(45deg);  font-size:0 !important;}
<!DOCTYPE html><html><head>
</head><body>
<a class="arrow" href="#info">v</a>
</body></html>

Underline and Arrow on Link Animation Hover

I don't know about Elementor, but in css, you could do something as the example below, it should get you started in achieving your goal.

a {
text-decoration: none;
font-family: sans-serif;
position: relative;
padding: .5rem 0;
color: blue;
}

a::before {
content: '';
width: 0;
height: 1px;
background: blue;
position: absolute;
bottom: 0;
left: 0;
transition: width .2s ease;
}

.elementor-button-icon {
position: absolute;
transform: translateX(-14px);
opacity: 0;
transition: all .2s ease;
}

.elementor-button-text {
display: inline-block;
transition: padding-left .2s ease;
}

a:hover .elementor-button-text {
padding-left: 24px;
}

a:hover::before {
width: 100%;
}

a:hover .elementor-button-icon {
transform: translateX(0);
opacity: 1;
}
<a href="#" class="elementor-button-link elementor-button elementor-size-sm">
<span class="elementor-button-content-wrapper">
<span class="elementor-button-icon elementor-align-icon-left">

</span>
<span class="elementor-button-text">Say Hello</span>
</span>
</a>

Arrow on a href

Delete this code from your CSS to remove those icons (EDIT: as Nick R mentioned as I was typing this).

a[href^="http:"] {
background-image: url('icons/external.png');

Style a link to be a circle with an arrow inside

You can get rid of the wrapping div (and the prefixed border-radius too), and use pseudo-elements instead with an arrow character in the content CSS property.

Result

A magnificent arrow or using \25b2 (and 50px font-size):A much more magnificent arrow

HTML

<a href="#"></a>

CSS

a {
background: #4679BD;
text-decoration:none; /* Remove that ugly underlining */
border-radius: 50%;
display: block;
height: 80px;
width: 80px;
}
a::after {
content:"\2191"; /* The code for the arrow : see the reference */
display: block;
color: white;
font-weight: bold;
font-size: 60px; /* Adjust for your needs */
text-align: center;
}

Demo

Bonus

A list of useful HTML and CSS entities!

Responsive? Using sizes relative to the font size (like em, rem...) instead of px, yes.

Responsive to the screen size itself? No, AFAIK.

Animated growing arrow link

You can create growing arrow by using "respoinsive" SVG like this.

svg{  width: 20px;  height: 20px;  transition:width 2s ease;  overflow: visible;}svg:hover{  width: 100px;}
<svg>  <defs>    <marker id="m" markerWidth="4" markerHeight="8"     refX="0" refY="1" viewBox="0 0 1 2">      <polygon points="0,0 1,1 0,2" fill="black"/>    </marker> </defs>  <line x1="0" y1="50%" x2="100%" y2="50%"   stroke-width="2" marker-end="url(#m)" stroke="black"/></svg>

How to insert css arrow into html page and make it clickable

JS:

$(document).ready(function(){
$(".button").click(function () {
var div= $("#"+this.name);
div.toggle("slow").siblings().hide("slow");
});
});

HTML:

<h1>
<div class="arrow"></div>

<a class="button" name="Show1" href="#">
<font size="5">QUESTION 1</font>
</a>
</h1>

<div id="Show1" style="display:none">
Answer to the question 1
</div>

Demo:
http://jsfiddle.net/788NK/6/

Hope is what you need.



Related Topics



Leave a reply



Submit