Question

我很抱歉这个＆＃34;摘要＆＃34;标题，我会尽可能地清楚！： - ）

我想在某些＆＃34;特殊＆＃34;之前添加图像。链接 - 我用两个解决方案取得了成果：

<a href="#" class="link1">My first link</a>
<a href="#" class="link2">My second link</a>

CSS

.link1 {
border-bottom: 1px dotted #ea5c2a;
text-decoration:none;
color:#ea5c2a;
background:url('http://www.showbuzz.org/rjmd/wp-content/uploads/2014/07/pointeur_orange.png') no-repeat;
padding-left:15px;
}

.link1:hover {
border-bottom: 2px solid #ea5c2a;
text-decoration:none;
}


.link2:before {
content: url('http://www.showbuzz.org/rjmd/wp-content/uploads/2014/07/pointeur_orange.png');
}

.link2 {
border-bottom: 1px dotted #ea5c2a;
text-decoration:none;
color:#ea5c2a;
}

.link2:hover {
border-bottom: 2px solid #ea5c2a;
text-decoration:none;
}

这是一个有效的JSFiddle：http://jsfiddle.net/9g278/

我有两个问题：

这两种解决方案之间的性能问题如何？第一个使用背景图像（不重复）并在链接的左侧添加填充。第二个使用伪选择器::before
如您所见，文本修饰位于链接的最左侧，包括背景。如何从单词的开头开始下划线，而不是链接本身的左侧？

非常感谢！

在CSS中预置元素，链接不扩展到完成div

0 个答案: