4

我想用背景风格化我的链接。

当链接短时，我的背景没有问题，但我的链接太长，我有一个断线，我的背景不再起作用。我不想使用text-decoration: underline，因为它不是相同的设计（自定义点缀它们之间的空格）

HTML：

<a href="#">Ceci est un menu très long</a>
<a href="#">Blabl</a>

CSS：

a {  
   background: url(dotted.jpg) repeat-x;
}

这是我的问题：

在此处输入图像描述

有可能这样做吗，如下所示？

在此处输入图像描述

和 ：

在此处输入图像描述

4

7 回答 7

4

你可以试试这个：

a {
  display: inline-block;
  max-width: 100px;
  text-decoration: none;
}

span {
  border-bottom: 1px dotted;
}
<a href='#'><span>click here to do something</span></a>

于 2014-07-03T13:05:38.763 回答
1

即使听起来很奇怪，您也可以尝试一个巨大的保证金：）：DEMO

a {
    border-bottom:1px dotted;
    text-decoration:none;
    margin-right:100%;
}

内联，但换行

于 2014-07-03T13:10:20.843 回答
1

你可以试试这个：

HTML：

<a href='#'><span>click here to do something</span></a>

CSS： 

a{
 display:inline-block;
 max-width:100px;
 text-decoration:none;
}
span{
 border-bottom: 1px dashed;
}

演示

于 2014-07-03T13:19:25.333 回答
0

You can do this in modern browsers with the border-image property: http://codepen.io/pageaffairs/pen/Gdxpg

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

div {
    width: 120px;
}

a {
    text-decoration: none;  
    line-height: 1.6em; 
    text-transform: uppercase;
    border-width: 0 0 9px 0;
    -webkit-border-image: url(http://pageaffairs.com/sp/so-24554400/border.png) 9 repeat; /* Safari */
    -o-border-image: url(http://pageaffairs.com/sp/so-24554400/border.png) 9 repeat;; /* Opera */
    border-image: url(http://pageaffairs.com/sp/so-24554400/border.png) 9 repeat;;
}

</style>
</head>
<body>

<div><a href="">Some text with an underline and background</a></div>

</body>
</html>
于 2014-07-03T13:08:24.703 回答
0

如果你想要个性化设计，你也有边框图像，但 Ie11 ......

于 2014-07-03T13:11:02.943 回答
0

只需省略跨度并制作 a{display:inline}。

<a href='#'>click here to do something</a>

a {
 display:inline;
 text-decoration:none;
 border-bottom: 1px dotted;
}

小提琴

更干净，像魅力一样工作。

于 2015-02-12T21:55:22.680 回答
0

无需为虚线下划线添加图像。您可以简单地使用 css 的border-bottom 属性。

<a href="#">Ceci est un menu très bla bla bla bla nla bla bla bla nla</a> 

a{
  border-bottom : 2px dotted #CCC;
  text-decoration : none;  
 }

访问http://jsfiddle.net/mijoemathew/zhp6D/以测试代码。

于 2014-07-03T13:24:51.990 回答