CSS3箭头超链接 [英] CSS3 arrow hyperlink

问题描述

尝试使用CSS创建箭头链接。
这一个在Firefox中有效，但在IE和基于webkit的浏览器中有一个问题箭头的位置。 Double div用于定位链接内容。任何建议？

Trying to make arrow link with CSS. This one works in Firefox, but has a problems in IE and webkit-based browsers with arrowhead's position. Double div used for centering link content. Any suggestions?

content
<a href="#" class="readmore">
    <div>
    <div>
        link content
    </div>
</div>
    </a> 
    content

CSS

.readmore {
    text-decoration:none;
}
.readmore > div {
    display: table;
    height: 30px;
    //width: 100%;
    background: #008a00;
    transition: background 0.2s;
}
.readmore > div:hover {
    background:orange;
}
.readmore > div::after {
    content:"";
    display:inline;
    position:absolute;
    border: 15px solid;
    margin-top:-15px;
    border-color:transparent transparent transparent #008a00;
    transition: border-left-color 0.2s;
}
.readmore > div::before {
    content:"";
    display:inline-block;
    width:6px;
    position: static;
    background:#008a00;
    transition: background 0.2s;
}
.readmore > div:hover::after {
    border-left-color:orange;
}
.readmore > div > div {
    display: table-cell;
    //text-align: center;
    vertical-align: middle;
    color:white;
}

推荐答案

元素的：：明确 0 为 div 元素设置位置：相对，以使绝对定位按预期工作：

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;
}

小提琴

注意：负面 code>应该删除。你的问题的原因是你使用负的 margin-top （可能通过试验和错误，直到它看起来在FF中，但位置也取决于 top 和 left 。这些属性的默认值是由不同的浏览器实现不同的，唯一的解决方案设置它的顺序是显式设置顶部， left ，并记住确定绝对定位元素的包含块的规则。 （位置为绝对或相对的最近祖先）。

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).

这篇关于CSS3箭头超链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！