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
or using \25b2
(and 50px font-size):
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
Easiest Way to Convert Polygon Clip-Path to Microsoft Edge Supported "Clippath" Svg
CSS: Not(), Selectors and Selecting Descendants
How to Make Border Radius in Popup Chrome Extension
Vertically Center a Div with Variable Height Within a Div That Is 100% of The Viewport
Understanding The Z-Offset in Transform-Origin
How to Add Multiple Browser Specific Values into a CSS Style in React
CSS: What Does The Question Mark at The End of CSS Do
Responsive Transparent Overlapping CSS Circles with Text Align Vertical and Center
Dynamically Changing Font, Font-Size, Font-Color, and So on in Vaadin Flow Web Apps
CSS Linear Gradient for Div with Dynamic Height
Horizontal Sharp Background Gradient with Specific Length of First Color
Jagged "Border" Showing Due to Background Colour on Wrapper Element with Border-Radius: 50%;
Yii Chtml::Radiobuttonlist - CSS to Align Horizontally
Please Explain in Detail This Part of Yui3 CSS Reset